[JavaScript知识库]vueCli2.0 和 vueCli3.0 项目中配置多环境运行打包 ？

本地 node 环境搭建?

• ?本地安装?node

从 node 官网?下载并安装 node，安装步骤只需一路 next?即可，安装完成后，打开命令行工具输入 node -v ，若出现对应版本号则说明安装成功，输入 npm -v，显示 npm 版本信息。

• 切换到淘宝镜像

当 node?环境安装完以后，由于 npm?包管理工具有些资源被堵，为了更快更稳定，需要切换到淘宝的 npm?镜像 cnpm 。输入如下命令进行安装和镜像切换，输入 cnpm -v ，可以查看当前 cnpm?版本用来检验安装是否成功?。

npm install -g cnpm --registry=https://registry.npm.taobao.org

vueCli2.0?中配置多环境运行打包

• 安装 vue-cli2.0?

vue-cli?提供一个官方命令行工具，可用于快速搭建大型单页面应用。全局安装命令如下，这里脚手架安装的是指 vue-cli2.0?，命令中加 -g?则表示全局安装 。

cnpm i -g vue-cli

• 基于 vue-cli2.0?新建项目

选定目录，命令行跳转到指定目录下，使用如下命令进行项目的创建 ，其中 my-project 为自定义项目名 。

vue init webpack my-project
// 或
vue init webpack-simple my-project

注意：这里是使用 vuecli2.0?新建项目的方法，目录结构和相关配置与 vuecli3.0?创建的项目不一致 。在 vuecli2.0?项目中存在 build?和 config?等配置目录，static?静态目录等 。而在 vuecli3.0?项目中将 webpack?配置项进行了高度融合，不在暴露出来，想要修改对应配置，需在根目录下新建 vue.config.js?文件中进行更改 。同时 vuecli3.0?也没有 build ，config，static?等目录 。

• config?目录下新增文件

文件内容，如 ez.env.js?中 。

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"ez"',
})

• ?更改 package.json?文件

主要是更改文件中 scripts?模块?内容，修改如下 。

"scripts": {
    "dev-jz": "webpack-dev-server --env=jz --inline --progress --config build/webpack.dev.conf.js",
    "dev-ez": "webpack-dev-server --env=ez --inline --progress --config build/webpack.dev.conf.js",
    "dev-tm": "webpack-dev-server --env=tm --inline --progress --config build/webpack.dev.conf.js",
    "dev-hs": "webpack-dev-server --env=hs --inline --progress --config build/webpack.dev.conf.js",
    "dev-snj": "webpack-dev-server --env=snj --inline --progress --config build/webpack.dev.conf.js",
    "build-jz": "node build/build.js --env=jz",
    "build-ez": "node build/build.js --env=ez",
    "build-tm": "node build/build.js --env=tm",
    "build-snj": "node build/build.js --env=snj",
    "build-hs": "node build/build.js --env=hs"
 },

• ?process.env.NODE_ENV?访问

通过?process.env，来判断当前模块的特有配置值，当运行 npm run dev-jz?或者 npm run build-jz?时，只会显示当前模块特有的配置值。还可以根据? process.env.NODE_ENV?属性来控制不同模块下的请求路径差异化，如示例 env?目录下文件。

在 main.js?中进行控制，在运行和打包当前模块的时候会读取当前模块请求路径等配置。?

const curEnv = process.env.NODE_ENV
let curEnvParam = require('../env/' + curEnv)
Vue.prototype.$globalEnv = {
  ...curEnvParam
};

?vueCli3.0?中配置多环境运行打包

• 安装 vue-cli3.0?脚手架

安装 vue-cli3.0 ，可以使用下列任一命令安装此依赖包。注意：vue Cli?需要 Node?要 8.9?或者更高版本?。

npm i -g @vue/cli
// 或者
yarn global add @vue/cli

• 基于 vue-cli3.0 新建项目

打开终端，切换到目标目录下，输入如下?命令?进行项目新建。同时还可以使用?可视化面板?方式来新建项目，安装依赖。

// 命令行
vue create my-demo
// 面板
vue ui

• 根目录下新建 .env.xx?文件

?文件内容，如 .env.hs?中 。

NODE_ENV = 'hs'
enableFaceID: true

• 更改 package.json?文件

主要是更改文件中 scripts?模块?内容，修改如下 。

  "scripts": {
        "dev-jz": "vue-cli-service serve --mode jz",
        "dev-ez": "vue-cli-service serve --mode ez",
        "dev-tm": "vue-cli-service serve --mode tm",
        "dev-hs": "vue-cli-service serve --mode hs",
        "dev-snj": "vue-cli-service serve --mode snj",
        "build-jz": "vue-cli-service build --mode jz",
        "build-ez": "vue-cli-service build --mode ez",
        "build-tm": "vue-cli-service build --mode tm",
        "build-snj": "vue-cli-service build --mode snj",
        "build-hs": "vue-cli-service build --mode hs"
    },

• vue.config.js?文件?

后续部分和 vuecli2.0?方式一致，需要注意的是，在 vuecli3.0?项目中由于将复杂的配置不在暴露，打包?时为了确保访问?静态资源路径正确，根目录下新增 vue.config.js?配置文件，进行根路径的相关配置 。

module.exports = {
    publicPath: "./", // 基本路径,可以设置成相对路径，这样所有的资源都会被链接为相对路径，打出来的包可以被部署在任意路径
    outputDir: "dist", //打包时生成的生产环境构建文件的目录
    assetsDir: 'public', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    /*devServer: {
        proxy: 'http://localhost:8080'
    }*/
}

完整示例链接：vue-Cli-2.0: vue-Cli2.0 和 vue-Cli3.0 项目中多模式运行打包等配置示例