vue-npm，不同环境的打包以及查看打包内容的方式

---

前言

不同环境打包代码不同，如测试环境，npm run build–test。这种该如何配置呢。

打包

基本全都是参照这两个文档（https://www.cnblogs.com/zengjielin/p/11152136.html、https://blog.csdn.net/weixin_33894640/article/details/92440675）写的，下面的内容能根据不同的打包命令打包，但是接口地址不会改变

安装cross-env

npm install cross-env --save-dev

修改打包文件

prod.env.js

'use strict'
module.exports = {
     
  NODE_ENV: '"production"',
  EVN_CONFIG:'"prod"',
}

dev.env.js

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

module.exports = merge(prodEnv, {
     
 NODE_ENV: '"development"',
 EVN_CONFIG:'"dev"',
})

test.env.js

'use strict'
module.exports = {
     
 NODE_ENV: '"production"',
 EVN_CONFIG:'"test"',
}

修改config/index.js,修改build那一部分的代码，其他不变

build: {
     
    // 添加test、prod环境变量配置
    prodEnv: require('./prod.env'),
    testEnv: require('./test.env'),

    //如果需要通过打包不同的环境变量，打包到不同的文件夹可以这样写,注意用了此处代码需要注释点下面的index和assetsRoot这两个配置
    //这里还要注意，要在ignore中进行忽略打包的名字/*_dist/，不然提交代码的时候会提交
    index: path.resolve(__dirname, '../' + process.env.EVN_CONFIG + '_dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../' + process.env.EVN_CONFIG + '_dist'),

    // Template for index.html
    // index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    // assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

修改build/build.js,注释process.env.NODE_ENV = 'production然后修改spinner。

'use strict'
require('./check-versions')()

// process.env.NODE_ENV = 'production'

const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

// const spinner = ora('building for production...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.EVN_CONFIG+ ' mode...' )
spinner.start()

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
     
  if (err) throw err
  webpack(webpackConfig, (err, stats) => {
     
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({
     
      colors: true,
      modules: false,
      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
      chunks: false,
      chunkModules: false
    }) + '\n\n')

    if (stats.hasErrors()) {
     
      console.log(chalk.red('  Build failed with errors.\n'))
      process.exit(1)
    }

    console.log(chalk.cyan('  Build complete.\n'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'
    ))
  })
})

修改build/webpack.prod.conf.js,注释const env = require(’…/config/prod.env’) 新增如下代码

const env = config.build[process.env.EVN_CONFIG+'Env']

修改package.json,build–test打包测试环境，build–prod打包正式环境

"scripts": {
     
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "build--test": "cross-env NODE_ENV=production EVN_CONFIG=test node build/build.js",
  "build--prod": "cross-env NODE_ENV=production EVN_CONFIG=prod node build/build.js"
 },

查看打包内容

基本全都是参照这个文档（https://blog.csdn.net/qq_38188762/article/details/88710384）写的

安装live-server

npm install -g live-server

报错信息command not found

在电脑属性-高级系统设置-高级-环境变量-系统变量-Path中增加路径 D:\nodejs\node_global （你安装的node下的node_global 的路径）

如果配置了环境还是有问题

那就查看一下，是不是没有配置node_global，然后再配置一下

运行环境

在dist的文件中，打开终端页面或者git

live-server

此时默认的端口是8080
如果有冲突

live-server --port=8000