vue.config.js分测试正式打包(分模块打包配置)配置

柔光的暖阳◎ 2022-02-15 11:09 743阅读 0赞

## vue-cli3.0打包配置准备工作 ##

### package.json里打包命令: ###

"build-test": "vue-cli-service build --mode test",

"build-prod": "vue-cli-service build --mode prod",

### 项目下新建.env.prod和.env.test文件: ###

NODE\_ENV = 'production' //配置参数  
VUE\_APP\_BASE\_URL = '//test.yang.com:8000/web/vue/'//静态资源打包目录  
OUTPUTDIR = 'dist'//输出目录

## 项目下新建vue.config.js文件: ##

module.exports = \{  
  publicPath: process.env.VUE\_APP\_BASE\_URL, // 静态文件目录(baseUrl Vue CLI 3.3 起已弃用)

![20190424141332847.png][]  
  outputDir: process.env.OUTPUTDIR,

assetsDir:相对于 `outputDir` 的(process.env.OUTPUTDIR+'/assets/')  
  indexPath: 'html/app/index.html', // 打包路径 相对于 `outputDir`

filenameHashing:true,//静态文件后是否生成hash值,建议为true默认

\--分模块打包需要pages:\{

\--也可以只写一个,通过参数

one:\{

entry:'/main.js',//可以仿照prod和test设置多个打包命令和.env配置文件使用参数

filename:'/one/index.html'(相对于outputDir)//可以仿照prod和test设置多个打包命令和.env配置文件使用参数

\},

two:\{

\},

three:\{

\},  
  devServer: \{// 本地开发设置  
    open: true,//打开浏览器  
    host: 'localhost.com',  
    port: 8080,  
    https: false,  
    hotOnly: false,  
    // 更多的代理配置  
    proxy: \{  
      '/Interface': \{ // 可以设置代理匹配项  
        target: 'http://localhost:8080' // 接口的域名  
        // pathRewrite: \{// 如果接口本身没有/Interface需要通过pathRewrite来重写了地址  
        // \}  
      \}  
    \}  
  \}  
\}

分测试正式打包和分模块打包配置[https://cli.vuejs.org/zh/config/][https_cli.vuejs.org_zh_config]

[20190424141332847.png]: /images/20220215/6d528c9e48064b1a8d2f4708640b7ab6.png
[https_cli.vuejs.org_zh_config]: https://cli.vuejs.org/zh/config/