vue在history模式下打包部署问题解决

喜欢ヅ旅行 2023-09-24 21:04 47阅读 0赞

### 引言 ###

项目使用的模板是`element-template`，由于业务需要，我将路由的`hash`模式更改为了`history模式`，然后在打包部署项目时就出现了问题

个人发现是资源的访问路径有问题，在部署之后发现每次访问的js资源路径前都会自动携带上我路由的部分参数

经过查阅资料后发现该问题的发生与路由的两种模式有关

### 遇到的问题 ###

问题如下：

![image-20230228231557971][]

在我执行`npm run build:prod`打包项目完成后，在本地打开`dist`目录下的`index.html`文件是无法打开的，我试过将`publicPath`修改为`./`，修改后依旧无效

![image-20230228231712208][]

但是项目部署到服务器上后可以正常打开，只是进入页面后在切换路由时会出现爆红然后卡死（根据f12可以看出是访问js资源和css资源路径有问题）

### 问题原因 ###

大概原因就是路由的`hash`模式和`history`模式对路由方式的处理不一样，所以导致我出现了这个问题

再具体的可以到网上去搜索：`vue中路由的hash模式与history模式打包部署项目区别`

### 解决问题 ###

1.  将`vue.config.js`中的`publicPath`参数修改成了`/`，不能是`./`
2.  在部署项目时在nginx中增加配置如下
    
        location / {
              
          try_files $uri $uri/ /index.html;
        }
3.  最后部署访问后发现项目没有问题

\*\*注意：\*\*如果项目不是部署在服务器的根路径下，在路由的配置位置需要加上`base: /包的位置/`，同时`vue.config.js`中的`publicPath`参数也需要设置成这个

示例：项目部署在服务器的`vue`包下,那么路由配置中需要加`base: /vue/`，`publicPath`需要设置成`/vue/`

![image-20230228232641859][]

### 总结 ###

1.  路由的hash模式与history模式打包时差异如下，
    
     *  hash
        
        1.  publicPath配置为`./`
        2.  打包完成后`可以直接运行`dist包下的index.html且有界面显示
        3.  部署时直接使用宝塔部署即可，无需配置其它
     *  history
        
        1.  publicPath配置为`/`或项目在服务器根下路径
        2.  打包完成后`不可直接运行`dist包下的index.html，必须要部署到服务器才行
        3.  部署时还需要自己去配置nginx，实现服务端的映射
            
                location / {
                          
                  try_files $uri $uri/ /index.html;
                }

[image-20230228231557971]: https://img-blog.csdnimg.cn/img_convert/c774b25b34c830b347293f9df73e03f1.png
[image-20230228231712208]: https://img-blog.csdnimg.cn/img_convert/69b38719064cf58a3add783be25ddfb7.png
[image-20230228232641859]: https://img-blog.csdnimg.cn/img_convert/44144205469c667a02aa30cfc8233601.png