vue-cli3分环境打包配置

布满荆棘的人生 2023-06-15 07:19 31阅读 0赞

## 概述 ##

在项目开发过程中一般会分为三种运行环境：开发环境、预览环境、生产环境，不同的环境在配置上的要求会有所不同，最简单的例子就是不同的环境对后端的接口请求地址不同。

打包过程中因需区分不同的运行环境而经常要手动去修改配置，这是一项枯燥且没有技术含量的工作，对于这种能用工具解决的工作就不要去人肉操作了，就算避免不了人肉操作，但也尽量让它来得简单点，比如输入不同命令就自动打不同环境的包。

接下来主要讲解在vue-cli3项目中怎么解放人肉配置打包，利用工程化和自动化提高打包效率。

## 第一步：创建配置文件 ##

在项目根目录创建3个配置文件  
**.env.development** 开发模式打包(运行命令 `npm run serve` 默认读取的配置)  
**.env.production** 生产模式打包(运行命令 `npm run build` 默认读取的配置)  
**.env.preview** 预览模式打包(运行命令 `npm run build --mode preview` 需要读取的配置)

注：vue-cli3脚手架中内置了`.env.development`与`.env.production`的默认配置，新增这两个配置文件后打包过程中webpack会合并默认配置和自定义配置的内容

**.env.development**

NODE_ENV = 'development'
    VUE_APP_TITLE = 'development'
    VUE_APP_BASE_URL = 'http://development.lihefei.com:8080'
    VUE_APP_WEBSOCKET_URL = 'ws://development.lihefei.com:21000'

**.env.production**

NODE_ENV = 'production'
    VUE_APP_TITLE = 'production'
    VUE_APP_BASE_URL = 'http://lihefei.com:8080'
    VUE_APP_WEBSOCKET_URL = 'ws://lihefei.com:21000'

**.env.preview**

NODE_ENV = 'production'
    VUE_APP_TITLE = 'preview'
    VUE_APP_BASE_URL = 'http://alpha.lihefei.com:8080'
    VUE_APP_WEBSOCKET_URL = 'ws://alpha.lihefei.com:21000'
    outputDir = 'preview'

**属性说明：**  
`NODE_ENV = development` 开发环境  
`NODE_ENV = production` 生产环境

`VUE_APP_TITLE = development` 开发模式打包  
`VUE_APP_TITLE = preview` 预览模式打包  
`VUE_APP_TITLE = production` 生产模式打包

`VUE_APP_BASE_URL` 后端常规业务接口地址(自定义，必选)  
`VUE_APP_WEBSOCKET_URL` 后端websocket推送接口地址(自定义，项目没有需求就不需要添加这一行配置)

`outputDir` 打包输出目录名称(`.env.development`与`.env.production`因vue-cli3脚手架中有默认配置可以省略该项)

## 第二步：修改package.json ##

在scripts中新增命令：`"preview": "vue-cli-service build --mode preview"`

"scripts": { 
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "preview": "vue-cli-service build --mode preview"
    }

## 第三步：新建process-env.js获取接口地址 ##

这个文件的作用是获取到process.env自定义的各种参数，然后根据需求自定义输出

export const baseUrl = process.env.VUE_APP_BASE_URL; //后端常规业务接口地址
    export const websocketUrl = process.env.VUE_APP_WEBSOCKET_URL; //后端websocket推送接口地址
    
    export default { 
        baseUrl,
        websocketUrl
    };

## 第四步：配置axios的baseURL ##

import {  baseUrl } from './process-env'; 
    axios.defaults.baseURL = baseUrl;

## 第五步：编辑vue.config.js配置输出路径 ##

module.exports = { 
    	outputDir: process.env.outputDir, //根据配置文件输出目录
    };

## 第六步：打包 ##

通过前面的配置后，可以输入不同的命令实现差异化打包

**正式生产环境打包**

npm run build

**预览环境打包**

npm run preview

到这一步已经满足不同打包模式下接口的自动配置，可以愉快的尝试不同环境的打包效果了  
如果对打包优化或更多差异化处理感兴趣继续往下看吧

## 第七步：打包优化及差异化处理 ##