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 默认可以加载在第一步里新建的文件中的配置参数

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

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


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

你可能感兴趣的:(Day 108/200 Vue3+Vue-cli4 生产环境如何设置变量及跨域)