官网:https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子
我项目中设置vue路由为history模式,项目就会少了地址栏的#号,比较美观,同时也会存在一系列问题。部署到nginx后会存在刷新404的问题。所以想用好该模式需要后端配合。官网有说明的
nginx的配置
修改nginx的location配置,使用try_files直接指定到index.html文件
location / {
# root 根目录,默认nginx下的html文件夹,可以指定其他
root ./html;
index index.html;
# vue的路由并不是真实物理路由,所以用try_files,路径都指向根目录下的index.html
try_files $uri $uri/ /index.html;
}
root:随便指定一个目录,目录下存放vue构建后的文件
index:指定的首页文件
try_files:因为vue的路由都是从index.html作为入口,所以用try_files就对了
js、css等引入失败
js、css等文件路径加载有误,跟地址栏的路由拼接起来作为js、css的目录了。找了很多资料,后来发现,是因为我的配置中使用了相对路径
查找很久,刚开始以为是nginx的锅,后来才发现,原来是我改成相对路径导致的
assetsPublicPath: './',
项目中config文件夹下index.js中,默认是"/",因为本地打开build时页面空白,所以修改成相对路径"./",结果影响到部署服务器了。因为我的路由模式是history,而且存在多个子路由。所以应该改成绝对路径。才能正常引入vue编译后的js、css文件
改成
assetsPublicPath: '/',
一切正常