Day 108/200 Vue3+Vue-cli4 生产环境如何设置变量及跨域

写在前面的话

今儿项目上测试环境，整了一天

踩了不少坑，总结下，分享给大家

（一）测试环境部署需要做的事儿

1、接口配置，区分本地开发环境和线上环境；

2、解决前后端项目分离的跨域问题

（二）对应的解决方案

1、官网有介绍，基础不好没看懂...

https://cn.vuejs.org/v2/guide/deployment.html

1）在根目录下新建

.env.development

.env.production

2) 里面分别对应开发和生产环境；

VUE_ENV='development'

VUE_APP_BASE_URL=''（测试及本地）后台IP"

3）划重点

在所有页面中，都有直接打印出process.env的值

console.log(process.env.VUE_APP_BASE_URL)

也就是说，Vue-cli4 默认可以加载在第一步里新建的文件中的配置参数；

所有页面都可以获取到这个变量；

直接把变量拼接到接口上即可；

vue.config.js 的配置如下

 devServer: {
    port: port,
    // open: true,
    proxy: {
      '/api': {
        target: '***/', // 跨域目标主机，自行修改
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 重写地址
        }
      },
    },
    overlay: {
      warnings: false,
      errors: false
    },
  },
  pluginOptions: {
    webpack: {
      dir: [
        './webpack'
      ]
    }
  },

2、我用的是reqwest的请求

在请求时，需要加上跨域配置；

crossOrigin: true

再之后需要再NGINX中配置；

nginx解决跨域问题

https://segmentfault.com/a/1190000019227927

参考链接

https://cn.vuejs.org/v2/guide/deployment.html

https://www.npmjs.com/package/reqwest