主要作用:
-
分环境打包的主要作用最重要的是在不同环境下打包配置的不同
-
通常有两个或者以上域名对应不同服务器,利用环境变量动态配置域名
-
其他需要判断环境更换的链接,图片,地址等
-
Vue-cli已经帮我们做了99%的配置,我们小菜只需要使用即可
- 1.项目根目录配置.env文件 pre和test分别代表两个测试环境,开发环境development和正式环境production已经默认存在
- 2.配置环境变量 键值对的格式,键是固定的
vue-cli原话:
请注意,只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。
咱小白也不懂啥意思,反正照他的来呗,这里我只用了一个 .env.pre文件同理
- 3. 配置package.json --mode 选项参数为命令行覆写默认的模式,就是要打包的模式,要和上面的环境文件对应
- 4.可以在根目录创建vue.config.js设置自己想要的配置
我们可以在app.vue里面打印一下当前环境, 打包命令 npm run dev
created() {
console.log('当前环境',process.env.NODE_ENV) // 当前环境 development
}
打包命令: npm run test
created() {
console.log('当前环境',process.env.NODE_ENV) // 当前环境 test
}
- 没有服务器, 在本地怎么模拟测试环境运行效果 --- 安装live-serve插件
npm i live-server -S
在项目中找到package.json 文件,修改 scripts
打包后在生成的dist目录下面运行 live-server命令即可
- 5.配置动态域名 创建文件
判断域名并导出 baseURLs.js
配置axios axios-config.js
现在发送请求就可以根据环境动态切换域名了 再把路由封装一下, axios封装配置一下,基本上项目就可以跑进来啦!