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

引言

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

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

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

遇到的问题

问题如下:

vue在history模式下打包部署问题解决_第1张图片

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

vue在history模式下打包部署问题解决_第2张图片

但是项目部署到服务器上后可以正常打开,只是进入页面后在切换路由时会出现爆红然后卡死(根据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/

vue在history模式下打包部署问题解决_第3张图片

总结

  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;
        }
        

你可能感兴趣的:(vue,vue.js)