Vue项目如何开启history模式

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 / {   \n  try_files $uri $uri/ /index.html; \n} 

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

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

location /bootService { \n\n proxy_pass http://127.0.0.1:8080\n\n}\n\nlocation / {\n\n  try_files $uri $uri/ /index.html;\n\n}