Vue项目如何开启history模式

作者: 图恩分类: 开发笔记阅读: 2152字数: 575发布时间： 2020-03-14 19:39:49

vue项目里面默认开启的hash模式，开启history模式页面的链接看起来会好一些，开启history需要更改路由里面的模式。

1、在router.js里面添加一个属性：

mode: 'history'

2、页面跳转不需要修改，如果是新开页签的话需要将#号去掉，比如从列表跳转到详情

Window.open('/detail?id=' + item.id)

3、config/index.js里面build的assetsPublicPath需要由'./'改成'/';

4、为了避免刷新或者不存在的地址出现404，vue官网建议修改nginx配置，nginx需要配置成：

location / {   
  try_files $uri $uri/ /index.html; 
}

由于我的服务的nginx是通过oneinstack安装的,默认将nginx跟tomcat指向同一个目录，所以需要修改一下原来的配置，稍微有一些差异。

如果是接口需要默认转发到8080端口：

location /bootService { 

 proxy_pass http://127.0.0.1:8080

}

location / {

  try_files $uri $uri/ /index.html;

}