关于vue项目history模式的笔记
文章目录1、图片资源路径2、vue.config.js文件的publicPath配置问题3、web容器的问题vue项目有2种模式:hash模式 、history模式理论上使用2种模式都可以,但实际上,使用 history模式 更适合一些,主要有以下2点原因。① url美观问题,hash显然是不美观的。② 微信分享、支付等,需要将url作为参数传递,会将字符 # 后的字符串截断,即:会丢失#后的内容
vue项目有2种模式:hash模式 、history模式
理论上使用2种模式都可以,但实际上,使用 history模式 更适合一些,主要有以下2点原因。
① url美观问题,hash显然是不美观的。
② 微信分享、支付等,需要将url作为参数传递,会将字符 # 后的字符串截断,即:会丢失#后的内容
使用 history模式 ,建议遵循以下规则搭建工程。
如果使用hash模式 ,可无需遵循,推荐将vue.config.js文件的publicPath配置为 ‘./’ 即可。
1、图片资源路径
- 脚手架生成的工程目录,默认将图片资源文件放在 src/assets 目录
- src目录下的文件会参与编译,即 npm run build 或 npm run serve 时,也会将图片资源文件进行编译。
- 在 history 模式时,使用src/assets下的图片资源文件会有页面图片加载不进来的问题。
- 建议将src/assets下的图片资源文件,放到public/xxx下,public目录是不参与编译的,由于public目录不参与编译,因此在使用js绑定图片资源时,无需再加require()。
2、vue.config.js文件的publicPath配置问题
请注意:修改vue.config.js文件后是需要重新npm run build或npm run serve才生效的。
提一嘴 !
vue.config.js 文件中的 publicPath 和 vue router 中的 base ,两者均是为了对应项目的实际路径问题的。
publicPath:配置了publicPath,url需要以publicPath开始才可以访问,即 http://{ip}:{port}/{publicPath}
base:配置了base,vue router总是以base作为前缀追加到路由中并正常访问,即 http://{ip}:{port}/{base}/{route_path},同时 http://{ip}:{port}/{route_path} 也是可用的,即 base 更多是为了使路由与 publicPath 使用相同url前缀而配置的。
请注意:配置了publicPath和base的项目,需要注意图片资源文件和web容器的实际路径问题,也需要同步进行更改才可以。
- 一般地,使用 hash模式 时,为了使 npm run build 编译出来的 dist 能够直接双击 index.html 打开网站,会将 vue.config.js 中的 publicPath 配置为 './'
- 在 history模式 时,需要将 vue.config.js 中的 publicPath 配置为 ‘/’ 或 直接删除publicPath这行配置(默认值就是’/’),否则可能会出现以下问题
- 刷新url 页面空白,控制台报 Uncaught SyntaxError: Unexpected token ‘<’ 。
3、web容器的问题
- 在 history模式 时,需要对web容器进行相关的配置,解决url刷新问题。详细配置,请参考。https://router.vuejs.org/zh/guide/essentials/history-mode.html
更多推荐
所有评论(0)