时间戳

首页 > 技术文章 > vue-cli3构建和发布 实现分环境打包步骤（给不同的环境配置相对应的打包命令）

vue-cli3构建和发布 实现分环境打包步骤（给不同的环境配置相对应的打包命令）

shun1015 2020-07-31 18:48 原文

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 页面看到具体的体积分布

 

推荐阅读