Vue打包与配置问题

使用vue-cli3.0，本地开发没有问题，打包出现了各种问题。

1.yarn build不起作用

这个没得说，yarn不行，那就用npm run build进行打包吧。

2.css、js等的相对路径问题

默认的配置里面，css、js等文件都是用绝对路径进行引入的，打包后浏览html可能会出现js等资源找不到的情况，所以应该在vue.config.js中添加publicPath:’./‘,baseUrl已经废弃了。

3.页面空白

相对路径也弄好了，打开html查看也把js、css等文件下载下来了，可就是页面是个空白。

找来找去，发现是route配置的mode问题，将mode的histroy模式改掉就好了。

history模式下,二级目录配置了后台，还是出现了空白。

我尝试了很多方法，比如：参考文章2：
(1) 更改路由表的base

(2) 更改vue.config.js中的assetsDir

(3) 修改nginx配置
尝试过使用try_files，和rewrite进行重写，都达不到我想要的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

## 面试系统手机端
location /phdevicemobile {
        alias  /cloud/dev/PhDevice/PhDeviceMobile/dist;
        #index index.html;

        try_files $uri $uri/ @router;

        ##if (!-e $request_filename) {
        ##      rewrite ^/(.*) /phdevicemobile/index.html last;
        ##      break;
        ##}


        client_max_body_size 40m;

}
location @router{
        rewrite ^/(.*) /phdevicemobile/index.html last;
}

还有要注意的就是在路由表的最下面，增加如下的内容，指定跳转路由

1
2
3
4
5
6

{
        path: '*', // 页面不存在的情况下会跳到首页
        redirect: '/',
        name: 'notFound',
        hidden: true
}

4.vue-cli3.x二级目录的部署说明

使用vue-router的hash模式的话，页面的url地址会显得很丑，于是我就想着使用history模式。刚开始想的，就是使用后台返回前端的index.html页面，但是这样后台和前台就要打包到一起了，特别是使用java的thymeleaf模板的时候，就要把前端的页面打包到resources目录下了，这样就违背了前后端分离的模式了。后来找到了使用nginx进行配置的方式，经过尝试，我最后明白了二级目录的具体含义。

主要部署步骤如下：(需要说明的就是dist这个目录，假如二级访问目录不是dist,就应该将router和publicPath中的内容，以及nginx中的dist改为自己的二级目录，比如：phdevicemobile)

1.一级目录的配置

修改nginx配置如下所示，root直接指向index.html的目录，然后使用try_files进行重新定向。

1
2
3
4
5
6
7
8
9
10

server {
        listen      9092;

        index index.html index.htm;
        root   D:\zlc\PhDeviceManage\device-mobile\dist;
        location  / {
                try_files $uri $uri/ /index.html;
        }

}

2.配置为二级目录

(1) 修改router的base为:”/di”

(2) 修改vue.config.js中的publicPath为：”/di/“

(3) nginx配置如下：

1
2
3
4
5
6
7
8
9
10

server {
        listen      9092;

        index index.html index.htm;	
        location /di {
                alias D:/zlc/PhDeviceManage/device-mobile/dist;
                try_files $uri $uri/ /di/index.html;
                index index.html;
        }
}

其中:
(1) try_files
try_files是挨个的往后尝试，前面的$uri没有，或者是$uri/ 目录没有，就自动重定向到最后一个@router变量上。

(2) rewrite
rewrite第一个 ^/(.*) 是正则表达式，匹配全部的地址，第二个是重定向的地址，第三个last有如下的选项：

5.Some chunks are larger than 4000 kBs after minification.

在打包的时候，出现了这个问题，意思就是把所有的代码都进行了打包到了一个文件中。给出的建议是：

• Using dynamic import() to code-split the application
• Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
• Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

【尝试】
我首先尝试了使用函数的形式，感觉这样的写法比较乱，我就没有采用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

rollupOptions: {
        output: {
                manualChunks(id) {
                if (id.includes('node_modules')) {
                const arr = id.toString().split('node_modules/')[1].split('/')
                switch(arr[0]) {
                case '@kangc':
                case '@naturefw':
                case '@popperjs':
                case '@vue':
                case 'axios':
                case 'element-plus':
                        return '_' + arr[0]
                        break
                default :
                        return '__vendor'
                        break
                }
                }
                },
                chunkFileNames: 'static/js1/[name]-[hash].js',
                entryFileNames: 'static/js2/[name]-[hash].js',
                assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
        },
        brotliSize: false, // 不统计
        target: 'esnext', 
        minify: 'esbuild' // 混淆器，terser构建后文件体积更小
}

2.使用import,这个方法我没有尝试，比如使用下面的按需引入的方式进行加载。

1
2

// 引入雷达图图表，图表后缀都为 Chart
const { RadarChart } = import('echarts/charts');

3.分解块,使用函数的形式，这样就是把很多的东西弄成了一个个的小块。

1
2
3
4
5

manualChunks(id) {
        if (id.includes('node_modules')) {
                return id.toString().split('node_modules/')[1].split('/')[0].toString();
        }
}

【解决方案】
我直接使用具名的方式解决了这个问题，比如将 mars3d 和 mars3d-cesium 进行了分块打包。

1
2
3
4
5
6
7
8
9
10
11
12

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        mars3d: ['mars3d'],
        'mars3d-cesium': ["mars3d-cesium"]
      }
    },
    target: 'esnext', 
    minify: 'esbuild' // 混淆器，terser构建后文件体积更小
  },
}