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 项目中多模式运行打包等配置示例