关于vue项目history模式的笔记

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