Vue-cli2的环境配置和Vue-cli3不一样。现在每篇文章还得区分版本，不知道Vue全面支持TS之后会是怎么样 =口=！
原理
- 不管怎么变，基本原理都是在
node进程中配置process.env的属性，然后可以全局访问process.env.xxx - Webpack进一步进行了封装，使用DefignPlugin插件，配置全局常量，写入
process.env，并在文件中以process.env.xxx方式使用
Vue-cli3封装
- Vue-cli3中使用dotenv包进行环境管理，所以需要在根目录下配置
.env文件。 - Vue-cli3中还对其做了其他封装，以后再看源码吧。先看怎么配置。
配置
- 用途：常用的配置就是根据不同的打包命令，可以生成不同接口URL的打包文件
- 根目录下新建
env.dev和env.test文件，分别写入配置
// env.dev
VUE_APP_baseURL=/dev/
// env.test
VUE_APP_baseURL=/test/
-
package.json文件中配置scripts命令
"build_test": "vue-cli-service build --mode test",
"build_dev": "vue-cli-service build --mode dev",
-
axios配置文件中使用
console.log(process.env.VUE_APP_baseURL)
let Axios = axios.create({
baseURL: process.env.VUE_APP_baseURL,
timeout: 50000
})
- 分别执行打包命令
npm run build_test和npm run build_dev，查看打印内容
dev:
test:
注意：
如果是要在项目包中使用的变量，必须以VUE_APP_开头才能被访问到
网友评论