vue项目有2种模式:hash模式history模式
理论上使用2种模式都可以,但实际上,使用 history模式 更适合一些,主要有以下2点原因。
① url美观问题,hash显然是不美观的。
② 微信分享、支付等,需要将url作为参数传递,会将字符 # 后的字符串截断,即:会丢失#后的内容

使用 history模式 ,建议遵循以下规则搭建工程。
如果使用hash模式 ,可无需遵循,推荐将vue.config.js文件的publicPath配置为 ‘./’ 即可。

1、图片资源路径

  • 脚手架生成的工程目录,默认将图片资源文件放在 src/assets 目录
  • src目录下的文件会参与编译,即 npm run buildnpm run serve 时,也会将图片资源文件进行编译。
  • history 模式时,使用src/assets下的图片资源文件会有页面图片加载不进来的问题
  • 建议将src/assets下的图片资源文件,放到public/xxx下,public目录是不参与编译的,由于public目录不参与编译,因此在使用js绑定图片资源时,无需再加require()

2、vue.config.js文件的publicPath配置问题

请注意:修改vue.config.js文件后是需要重新npm run buildnpm 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容器的问题

Logo

前往低代码交流专区

更多推荐