Vue-cli4创建项目并配置多环境
安装vue-cli
npm install -g @vue/cli
创建项目
vue create vue-demo
配置多环境
在什么情况下会使用到多环境?比如访问后台的接口地址随着环境不同地址会不同
添加多环境配置文件
配置文件内容
.env.prod
NODE_ENV=production
VUE_APP_BASE_URL='http://prod.com'
- NODE_ENV:制定vue模式,一般用的development和production,即一个是开发调试环境,一个是生产环境,默认development模式打包代码不会压缩混淆
- VUE_APP_XXXXX:变量的key,只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中
配置脚本
访问变量
console.log(process.env.VUE_APP_SECRET)
启动或打包
使用制定脚本启动即可