产品营销型网站建设,网站建设费用 百度文库,互联网seo是什么,网站需求分析的主要内容引言
项目使用的模板是element-template#xff0c;由于业务需要#xff0c;我将路由的hash模式更改为了history模式#xff0c;然后在打包部署项目时就出现了问题
个人发现是资源的访问路径有问题#xff0c;在部署之后发现每次访问的js资源路径前都会自动携带上我路由的…引言
项目使用的模板是element-template由于业务需要我将路由的hash模式更改为了history模式然后在打包部署项目时就出现了问题
个人发现是资源的访问路径有问题在部署之后发现每次访问的js资源路径前都会自动携带上我路由的部分参数
经过查阅资料后发现该问题的发生与路由的两种模式有关
遇到的问题
问题如下 在我执行npm run build:prod打包项目完成后在本地打开dist目录下的index.html文件是无法打开的我试过将publicPath修改为./修改后依旧无效 但是项目部署到服务器上后可以正常打开只是进入页面后在切换路由时会出现爆红然后卡死根据f12可以看出是访问js资源和css资源路径有问题
问题原因
大概原因就是路由的hash模式和history模式对路由方式的处理不一样所以导致我出现了这个问题
再具体的可以到网上去搜索vue中路由的hash模式与history模式打包部署项目区别
解决问题 将vue.config.js中的publicPath参数修改成了/不能是./ 在部署项目时在nginx中增加配置如下 location / {try_files $uri $uri/ /index.html;
}最后部署访问后发现项目没有问题
**注意**如果项目不是部署在服务器的根路径下在路由的配置位置需要加上base: /包的位置/同时vue.config.js中的publicPath参数也需要设置成这个
示例项目部署在服务器的vue包下,那么路由配置中需要加base: /vue/publicPath需要设置成/vue/ 总结 路由的hash模式与history模式打包时差异如下 hash publicPath配置为./打包完成后可以直接运行dist包下的index.html且有界面显示部署时直接使用宝塔部署即可无需配置其它 history publicPath配置为/或项目在服务器根下路径 打包完成后不可直接运行dist包下的index.html必须要部署到服务器才行 部署时还需要自己去配置nginx实现服务端的映射 location / {try_files $uri $uri/ /index.html;
}
