Vue+Webpack项目多环境打包

Vue+Webpack项目实现多环境打包

问题描述

项目需要部署到线上开发环境，线上测试环境以及线上生产环境，不同环境访问的地址不同，但是原来的项目采用的是在不同的环境下注释代码展示不同的地址的方式，很明显这样是非常麻烦且有一定的风险的。为此，特意做了此次记录用命令行来实现Vue+Webpack项目多环境打包

一、 安装依赖cross-env

npm i --save-dev cross-env

二、修改package.json文件

"scripts": {
    "dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build:dev": "cross-env NODE_ENV=development ENV_CONFIG=dev node build/build.js",
    "build:test": "cross-env NODE_ENV=testing ENV_CONFIG=test node build/build.js",
    "build:prod": "cross-env NODE_ENV=production ENV_CONFIG=prod node build/build.js"
  },

三、修改config文件

1. 添加dev.env.js文件

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
//获取NODE_ENV参数
 const env=process.env.NODE_ENV
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ENV_CONFIG:'"dev"',
  API_ROOT: env === 'development' ? '"http://...(项目线上开发地址))"' : '"/api"'
})

2. 添加test.env.js

'use strict'
module.exports = {
  NODE_ENV: '"testing"',
  ENV_CONFIG: '"test"',
  API_ROOT: '"http://..."'
}

3. 添加prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"',
  API_ROOT: '"https://..."'
}

4. 修改index.js文件

   4.1 修改proxyTable解决浏览器跨域的问题

   dev: {
    // Paths
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {
      "/api": {
         target: "http://...", 
        changeOrigin: true, //是否允许跨域
        pathRewrite: {
          "^/api": "" //需要rewrite重写的,
        }
      }
    },
   

   4.2 修改build字段

    build: {
    // Template for index.html
    devEnv: require('./dev.env'),//++++++++++新增
    testEnv: require('./test.env'),//++++++++++新增
    prodEnv: require('./prod.env'),//++++++++++新增
    index: path.resolve(__dirname, "../dist/index.html"),
   
    // Paths
    assetsRoot: path.resolve(__dirname, "../dist"),
    assetsSubDirectory: "static",
    assetsPublicPath: "./",  //++++++++++修改
    }
   

   四、修改项目build文件（添加各打包环境配置）

   1. 修改build.js文件

   // process.env.NODE_ENV = 'production'  // 将此行代码注释
   // const spinner = ora('building for production...')  // 将此行代码注释
   const spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.ENV_CONFIG + ' production...')
   

   2. 修改utils.js文件

    // 原代码
    exports.assetsPath = function (_path) {
    const assetsSubDirectory = process.env.NODE_ENV === 'production'
        ? config.build.assetsSubDirectory
        : config.dev.assetsSubDirectory
   
    return path.posix.join(assetsSubDirectory, _path)
    }
    //修改后代码
    exports.assetsPath = function (_path) {
    const assetsSubDirectory = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'testing'
        ? config.build.assetsSubDirectory
        : config.dev.assetsSubDirectory
   
    return path.posix.join(assetsSubDirectory, _path)
    }
   
   

   3. 修改webpack.base.conf.js文件

    // 原代码
    output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
        ? config.build.assetsPublicPath
        : config.dev.assetsPublicPath
    },
    // 修改后代码
    output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'testing' ? config.build.assetsPublicPath
        : config.dev.assetsPublicPath
    },
   
   

   4. 修改webpack.prod.conf.js文件

   //原代码
    const env = require('../config/prod.env')
    // 修改后代码
    const env = config.build[process.env.ENV_CONFIG+'Env']
   

   5.修改vue-loader.conf.js文件

    // 原代码：
    const isProduction = process.env.NODE_ENV === 'production'
    const sourceMapEnabled = isProduction
    ? config.build.productionSourceMap
    : config.dev.cssSourceMap
    修改后代码：
    // const isProduction = process.env.NODE_ENV === 'production'
    const isProduction = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'presentation'
    const sourceMapEnabled = isProduction
    ? config.build.productionSourceMap
    : config.dev.cssSourceMap
   

五、 修改项目中http请求设置

const http=process.env.API_ROOT

以上设置完毕之后，就可以完成用命令行来实现多环境打包了

线上开发环境：npm run build:dev
线上测试环境：npm run build:test
线上生产环境：npm run build:prod