配置vue2的生产环境和开发环境
在根目录下新建.env.development(这个文件配置的是开发环境的变量)和.env.production(这个文件配置的是生产/正式环境的变量)两个文件,VUE_APP_BASE_URL的地址不用加引号!
- 在.env.development中:
1 NODE_ENV = 'development' 2 VUE_APP_MODE = 'development'
3 #//VUE_APP_API_URL = http://localhost:3000 //这里如果是在vue.config.js中配置了跨域地址那这里就不能写这个, 要写跨域地址匹配的 比如跨域地址中匹配 ‘/api’ ,那就写下面那个变量 4 VUE_APP_BASE_URL=/api
- 在.env.production中:
NODE_ENV = 'production' VUE_APP_MODE = 'production' #//这里写项目上线后的接口地址 VUE_APP_BASE_URL = https://xxxxxxx
- 在vue.config.js中:
devServer: { // port: 8080, proxy: { 'api': { target: "http://xxxxxxxx", changeOrigin: true, // 是否跨域 pathRewrite: { '^/api': '' } } } }
- 在axios二次封装的文件,我这里是request.js文件
const instance = axios.create({ // baseURL: 'http://xxxxxxxx', baseURL: process.env.VUE_APP_BASE_URL, timeout: 5000 })
这里刚开始我的baseURL是baseURL:'http://xxxxxxxx'换成了baseURL:'process.env.VUE_APP_BASE_URL' ,出现了如下的bug:
原因是baseURL:'process.env.VUE_APP_BASE_URL' 加了引号,变成了字符串,所以就找不到配置的https的地址!把引号去掉即可。
- 在package.json中:配置相关的命令
1 "scripts": { 2 "serve": "vue-cli-service serve --mode production", 3 "build": "patch-package && vue-cli-service build", 4 "production": "patch-package && vue-cli-service build --mode production", 5 "development": "patch-package && vue-cli-service build --mode development", 6 "postinstall": "patch-package" 7 },
到这里配置就完成啦,如果哪里存在问题欢迎指正!