vue-cli3配置vue.config.js与跨域处理

---

前言

通过vue-cli3脚手架创建的项目中没有vue.config.js文件，因此我们可以在package.json同级目录下新建一个vue.config.js文件。

1.基本配置

文件格式应该为：

// vue.config.js
module.exports = {
  // 选项...
}

我的配置：

module.exports = {
  outputDir: 'dist',   //build输出目录
  assetsDir: 'assets', //静态资源目录（js, css, img）
  lintOnSave: false, //是否开启eslint
  devServer: {
      open: true, //是否自动弹出浏览器页面
      host: "localhost", 
      port: '8080', //我的端口
  }
}

更多配置项可以参考官方网址https://cli.vuejs.org/zh/config/#vue-config-js

2.跨域

在前后端分离时，服务器会各自占用一个端口，比如前端是8080，后端是8888，导致无法通行，不能互相传输数据。这时就需要通过跨域来解决此问题。
这里采用的方法是在vue.config.js文件中配置proxy项。

proxy: {
        '/api': {
            target: 'http://localhost:8888', //后端服务器地址
            ws: true,  //代理websockets
            changeOrigin: true, // 虚拟的站点需要更管origin
            pathRewrite: {//重写路径
                '^/api': ''
            }
        }
    },

总结

跨域是前后端分离下常常会遇到的问题，我们可以通过在vue.config.js文件中配置proxy项来解决，除此，还可以安装nginx作为代理，它可以将前后端放在同一个域中，会自动将用户的访问的80端口转发到指定服务上，当界面请求接口数据时，ngnix会转发到后端接口的服务器上。