下面拿vue项目做个改动

1.安装cross-env 
cnpm i cross-env -D

2.package.json配置不同环境下打包的命令

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

命令解释:
npm run build: 打包到dist目录下,测试环境使用
npm run PublishTest: 打包到PublishTest目录下,预发布环境下使用
npm run Release: 打包到Release目录下,正式环境使用

3.config/index.js修改

module.exports = {
  dev: {...  },

  build: {...},

   // 正式环境下打包到Release文件夹下,复制上面build:{...}的代码,将index和assetsRoot的文件路径改下就行
  Release: {
    index: path.resolve(__dirname, '../Release/index.html'),
    assetsRoot: path.resolve(__dirname, '../Release'),
    // 以下配置同build
    ...
  },
// 预发布环境下打包到PublishTest文件夹下
  PublishTest: {
    index: path.resolve(__dirname, '../PublishTest/index.html'),
    assetsRoot: path.resolve(__dirname, '../PublishTest'),
    // 以下配置同build
    ...    
  }
}

4.build/build.js修改
注释掉  process.env.NODE_ENV = 'production'

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

// process.env.NODE_ENV = 'production'

...

5.build/webpack.base.cof.js修改
1.将config.build做成可配置的configEnv 
2. 将path和publicPath更改下

'use strict'
...

/*将config.build做成根据不同环境下的配置*/
const configEnv = process.env.NODE_ENV === 'production'
  ? require('../config').build
  : process.env.NODE_ENV === 'Release'
    ?require('../config').Release
      :require('../config').PublishTest

/*将path和publicPath更改下*/
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    ...
  },
  output: {
    path:configEnv.assetsRoot ,
    ...
    publicPath: configEnv.assetsPublicPath
  },
  resolve: {...},
  plugins: [ ... ],
  module: {...},
  node: {... }
}

6.build/webpack.prod.cof.js修改
1.将config.build做成可配置的configEnv ,并且将页面上所有的config.build替换成configEnv
2. new webpack.DefinePlugin里面添加‘process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)

'use strict'
...
/*将config.build做成根据不同环境下的配置,并且将页面上所有的config.build替换成configEnv*/
const configEnv = process.env.NODE_ENV === 'production'
  ? require('../config').build
  : process.env.NODE_ENV === 'Release'
    ?require('../config').Release
      :require('../config').PublishTest

const webpackConfig = merge(baseWebpackConfig, {
  module: {...},
  devtool: configEnv.productionSourceMap ? configEnv.devtool : false,
  output: {... },
  plugins: [
   ...
    /* 允许创建一个在编译时可以配置的全局常量 */
    new webpack.DefinePlugin({
       // 'process.env': env,
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
   ....
  ]
})

module.exports = webpackConfig

以上配置完就ok了(当然有兴趣的小可爱可以再优化优化config/index.js代码),最后运行命令
npm run build: 打包到dist目录下,测试环境使用
npm run PublishTest: 打包到PublishTest目录下,预发布环境下使用
npm run Release: 打包到Release目录下,正式环境使用

 

Logo

前往低代码交流专区

更多推荐