vue项目实现多环境打包 / 运行

大大源码 • 2023年4月24日 am12:30 • 其他

vue项目实现多环境打包/运行

1. 添加配置文件

在项目中 config 文件夹中添加开发环境，测试环境，生产环境配置文件（这里配置文件建议格式【*.env.js】方便后面配置文件的读取操作）

在这里插入图片描述

举个测试配置环境的例子：
'use strict' module.exports = { // 测试 NODE_ENV: '"test"', API_HOST: '"http://192.168.0.130:8080/"', }
这里的 NODE_ENV 可以当作一个唯一（当前配置文件的key），API_HOST 就是当前环境的地址
生产配置环境同上

2. 安装cross-env

npm install --save-dev cross-env
cross-env 介绍：点击跳转 cross-env 介绍

3. 配置相关命令

配置需要的环境运行命令：
进入 package.json 文件

"scripts": {
    "//1": "打生产环境的包",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
    "//2": "打测试环境的包",
    "build:test": "cross-env NODE_ENV=test env_config=test node build/build.js",
    "//3": "打生产和测试环境的包",
    "build:all": "cross-env NODE_ENV=production env_config=prod node build/build.js && cross-env NODE_ENV=test env_config=test node build/build.js",
    "//4": "运行开发环境",
    "start:dev": "cross-env NODE_ENV=development env_config=dev webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "//5": "运行测试环境",
    "start:test": "cross-env NODE_ENV=production env_config=test webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "//6": "运行生产环境",
    "start:prod": "cross-env NODE_ENV=production env_config=prod webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
  },

NODE_ENV 后面填刚刚添加的配置文件中 NODE_ENV 的值即可，env_config 后面填配置文件的名称（去掉 .env.js 后缀）

4.更改webpack配置文件

(1)，打包配置【build - - webpack.prod.conf.js】
找到这一行更改： const env = require('../config/' + process.env.env_config + '.env')
更改 index.js 文件中 build 中的内容，主要作用是判断打包是打的什么包并且另取包名（代码如下）

// Template for index.html
    index: process.env.env_config === 'test' ? path.resolve(__dirname, '../test/index.html') : path.resolve(__dirname, '../ecar/index.html'),

    // Paths
    assetsRoot: process.env.env_config === 'test' ? path.resolve(__dirname, '../test') : path.resolve(__dirname, '../ecar'),