本文基于 mpvue 1.4.6 撰写

mpvue项目中，无论是开发编译 npm run dev 还是生产编译 npm run build 最后生成的小程序代码都在 dist 目录中，但有时候为了便于管理不同版本或者其他需求，这时候就需要分开编译开发版和正式版。

我们现在要实现的需求是把开发时生成的小程序代码放在 dist 目录中，而正式生产版本的小程序代码放在 release 目录中。

1. 修改 config/index.js 配置，指定输出路径：

   module.exports = {
     build: {
       // 指定 build 环境下资源路径为 release 下
       assetsRoot: path.resolve(__dirname, '../release'),
     },
     dev: {
       // 指定 dev 环境下资源路径为 dist 下
       assetsRoot: path.resolve(__dirname, '../dist'),
     }
   }
   

2. 修改 webpack.dev.conf.js 配置，指定开发环境的输出路径：

   let config = require('../config')
   module.exports = merge(baseWebpackConfig, {
     output: {
       path: config.dev.assetsRoot
     }
   })
   

3. 修改 webpack.dev.conf.js 配置，指定开发环境的输出路径：

   let config = require('../config')
   module.exports = merge(baseWebpackConfig, {
     output: {
       path: config.build.assetsRoot
     }
   })
   

4. 修改 webpack.base.conf.js 配置，指定静态文件的输出路径：

   webpack.base.conf.js 是 webpack.dev.conf.js 和 webpack.dev.conf.js 共用的基础配置文件，其中的 plugins 项指定了编译时用到的插件，其中就有一项指定了静态文件的存放路径。

   我们把一些图片、图标等静态资源存放在项目的 static 目录下，因此，在编译的时候我们也要将它复制到对应打包目录下的 static 目录中。

   我们在 webpack.base.conf.js 中找到以下配置：

   module.exports = {
     plugins: [
       new CopyWebpackPlugin([
         {
           from: path.resolve(__dirname, '../static'),
           to: path.resolve(__dirname, '../dist/static'),
           ignore: ['.*']
         }
       ])
     ]
   }
   

   这里的作用是将项目中的 static 复制到 dist/static 中，那么我们现在只需要做个判断，根据不同环境选择不同的输出路径：

   let config = require('../config')
   
   let rootPath = process.env.NODE_ENV === 'production'
     ? config.build.assetsRoot
     : config.dev.assetsRoot
   
   module.exports = {
     plugins: [
       new CopyWebpackPlugin([
         {
           from: path.resolve(__dirname, '../static'),
           to: path.resolve(__dirname, rootPath),
           ignore: ['.*']
         }
       ])
     ]
   }
   

经过上面几步，我们就可以让开发环境和生产环境所生成的小程序代码分别输出到不同的路径啦！