2020-12-04

简单记录一下vue+node前后端分离开发的几个坑

---

前言

本篇主要记录一些vue+node在部署和配置中存在的坑

---

一、vue.config.js和config文件夹

根据百度得到的结果：vue-cli 3.x 脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动在根目录中创建 vue.config.js。但其实我的2.9.6中已经没有vue.config.js文件了，当然这个不是重点，重点是如何配置。
起因是我想在node里面部署多个项目，类似于如下目录结构：

网上只介绍了如何配置vue.config.js的publicPath属性，如果没有也只是简单说了句新建该文件，

    //这是vue.config.js文件
    // 这条语句的意思是在打包时给所有的引入添加上/app路径，可以根据自己的需求来命名后面的名字
    publicPath:"/app", // /app 可以修改

然而等你新建了以后发现根本没有卵用。替代方案是修改的config文件夹中的index.js文件，我这里只涉及到了生产环境，所以就只修改了build对象，关注assetsPublicPath属性

  //这是config/index.js
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/app',
  }

二、vue路由配置和history模式

配置完index文件后，记得配置路由文件：
router/index.js:

//router/index.js
export default new Router({
  mode: "history",
  base: process.env.Base_URL,
  routes: [
    {
      //这里修改与assetsPublicPath一致
      path: '/app',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

//app.js
var history = require('connect-history-api-fallback')

这里的history模式以及node中app.js文件使用connect-history-api-fallback待商榷，本人测试发现即使不使用history也不会存在404的情况。

---

三、node配置

//app.js
//记得引入express
app.use('/app', express.static(path.join(__dirname, 'public/app')));
app.use('/cms', express.static(path.join(__dirname, 'public/cms')));

四、前后端交互

1.从vue向node传值

get方法

//router.js
//req参数接收从前端传过来的值，get方法使用req.quey取值
router.get('/addUser',function(req,res){
	let user = req.query
})
//vue
//使用params接收要传递给后端的对象 
      Axios({
        url: url,
        method:"get",
        params: this.obj["user4"], 
      }).then(res=>{
          console.log(res);
      })

post方法

//router.js
//req参数接收从前端传过来的值，post方法使用req.body取值
router.post('/addUser',function(req,res){
	let user = req.body
})
//vue
//使用data接收对象,this.obj["user4"]是要传递的对象 
      Axios({
        url: url,
        method:"post",
        data: this.obj["user4"], 
      }).then(res=>{
          console.log(res);
      })

2.vue获取json数据

//router.js
var jsonPath = path.resolve(".") + '/files/' + 'users.json';
router.get('/getUser', function (req, res) {
    fs.readFile(jsonPath, 'utf8', function (err, data) {
        res.end(data);
    })
})

//vue
let url = "http://localhost:3000/api/getUser";
Axios({
    url: url,
    method:"GET"
}).then(res=>{
    console.log(res)
  })
}

五、部署

1、部署在express服务器中

经过以上步骤后，直接把打包完的dist文件夹改好名字，放在express服务器的public文件夹中即可，通过http://localhost:3000/app和http://localhost:3000/cms的方式访问

2、部署在iis中

如果是通过网站的方式部署在iis中，是访问不到的，如下图

应该先新建一个网站，然后以应用程序的方式部署，如下图

完