vue-cli3构建和发布 实现分环境打包步骤(给不同的环境配置相对应的打包命令)
https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/deploy.html#%E6%9E%84%E5%BB%BA
console.log(process.env.VUE_APP_***) // 环境变量 console.log(process.env.NODE_ENV) //环境
1.在vue-cli3的项目中, process.env.NODE_ENV 为当前环境
npm run serve时 process.env.NODE_ENV 为 ‘development’; //开发环境
npm run build 时 process.env.NODE_ENV 为 ‘production’; //生产环境
此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出 本地和线上环境。
但是在线上环境又分为 测试环境,预生产环境,生产环境,这时候就要在线上环境的条件下添加环境变量来区分
2. 在项目根目录添加文件“.env.test”和“.env.pre”
所有测试环境或者正式环境变量的配置都在 .env.development等 .env.xxxx
文件中
注意!!!
环境变量必须以 VUE_APP_
为开头。如:VUE_APP_API
、VUE_APP_TITLE
你在代码中可以通过如下方式获取环境变量:
console.log(process.env.VUE_APP_xxxx)
两个文件中
.env.test:
NODE_ENV = 'production' VUE_APP_WISEYEAPP_ENV_NAME = 'test' //环境变量
.env.pre
NODE_ENV = 'production' VUE_APP_WISEYEAPP_ENV_NAME = 'pre' //环境变量 VUE_APP_OUTPUT_DIR = 'preDist'
3. package.json中打包命令:
{ ··· "scripts": { "serve": "vue-cli-service serve", //本地运行,会把process.env.NODE_ENV设置为‘development’ "build:test": "vue-cli-service build --mode test", // 注意,这里 “--mode 名字“ 要和步骤2中文件名 “.env.名字” 名字保持一致 "build:pre": "vue-cli-service build --mode pre" }, "dependencies": { ··· }, ··· }
4. 然后 api/config.js里
const BaseConfig = { dev: { BaseUrl: 'http://191.168.1.1/dev' }, test: { BaseUrl: 'http://191.168.1.1/test' }, pre: { BaseUrl: 'http://191.168.1.1/pre' } } let BaseUrlConfig = BaseConfig.dev if (process.env.NODE_ENV === 'production' && process.env.VUE_APP_WISEYEAPP_ENV_NAME === 'test') { //区分环境和环境变量
// 测试环境
BaseUrlConfig = BaseConfig.test
} else if (process.env.NODE_ENV === 'production' && process.env.VUE_APP_WISEYEAPP_ENV_NAME === 'pre') {
// 预生产环境
BaseUrlConfig = BaseConfig.pre
}
export default BaseUrlConfig
5. 项目里 接口.js 文件里引用就好了
import request from '@/utils/request' import BaseUrlConfig from '@/api/config'
或者 (在请求中引入设定的url,用的是axios,所以在axios的配置文件中引入并使用)
import axios from 'axios' import baseUrl from './constans' axios.defaults.withCredentials = true; axios.defaults.baseURL = baseUrl; ····
6. 分析构建文件体积
npm run preview -- --report
执行命令后本地会生成一个dist包,传统的打包dist里面只有一个index.html,而这个会多一个report.html,打开这个HTML文件
运行之后你就可以在 http://localhost:****/report.html 页面看到具体的体积分布