vue-cli4创建项目并配置多环境

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)

启动或打包

使用制定脚本启动即可