vue history模式在nginx下错误的解决方案

原始链接:http://tigerliu.site/2018/10/vue-history/

众所周知 vue 默认的路由为 hash 模式，在 URL 上面会带一个#号，然而某些时候并不是我们想要的。如何去掉#号？去掉#号后的一些问题如何处理？下面我们简单探讨下这块内容。
使用 history 模式
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

修改路由模式
const router = new VueRouter({
mode: ‘history’,
routes: […]
})

修改 config/index.js
config/index.js 中 build 下的 assetsPublicPath 从’./‘改成’/‘

module.exports = {
build: {
env: require(’./prod.env’),
index: path.resolve(__dirname, ‘…/dist/index.html’),
assetsRoot: path.resolve(__dirname, ‘…/dist’),
assetsSubDirectory: ‘static’,
assetsPublicPath: ‘/’,
productionSourceMap: true,
… 其他代码略

在 nginx 下的配置Apache

nginx

location / {
try_files $uri $uri/ /index.html;
}
原生 Node.js

const http = require(‘http’);
const fs = require(‘fs’);
const httpPort = 80;

http
.createServer((req, res) => {
fs.readFile(‘index.htm’, ‘utf-8’, (err, content) => {
if (err) {
console.log(‘We cannot open “index.htm” file.’);
}

  res.writeHead(200, {
    'Content-Type': 'text/html; charset=utf-8'
  });

  res.end(content);
});

})
.listen(httpPort, () => {
console.log(‘Server listening on: http://localhost:%s’, httpPort);
});
详细配置见官方配置

404 的解决方案
第一种方式见上面–在 nginx 下的配置，还是贴一下：

location / {
try_files $uri $uri/ /index.html;
}
第二招，逻辑类似

location / {
root /data/nginx/html;
index index.html index.htm;
if (!-e $request_filename) {
rewrite ^/(.*) /index.html last;
break;
}
}
第三式,直接转发到 index.html

location / {
root /data/nginx/html;
index index.html index.htm;
error_page 404 /index.html;
}
第四招，类似第二招

location / {
root html;
try_files $uri KaTeX parse error: Expected 'EOF', got '}' at position 48: …tml index.htm; }̲ location @rout… /index.html last;
}
Uncaught SyntaxError: Unexpected token <错误
配置好了刷新后一片空白？打开控制台一看什么鬼，Uncaught SyntaxError: Unexpected token <错误？

貌似是 JS 的错误，下面我们逐一排查。

错误排查
检查配置有没有问题：

检查 config/index.js 中 build 下的 assetsPublicPath 是否正确？

module.exports = {
build: {
env: require(’./prod.env’),
index: path.resolve(__dirname, ‘…/dist/index.html’),
assetsRoot: path.resolve(__dirname, ‘…/dist’),
assetsSubDirectory: ‘static’,
assetsPublicPath: ‘/’,
productionSourceMap: true,
… 其他代码略
检查模式是否为 history

const router = new VueRouter({
mode: ‘history’,
routes: […]
})
检查路由路径
你的子路径需要加上去，给每一个 component 加上 name，例如：

const router = new Router({
mode: ‘history’,
routes: [
{
path: ‘/’,
component: Index,
name: ‘index’,
redirect: ‘/home’,
children: [{
path: ‘home’, //这里会不会有问题？
component: Home
},
{
path: ‘goodsDetails’, //子路径需要配完整，应该是/home/goodsDetails
component: goodsDetails
},
}
]
})
以上都检查完，打包重新部署看看

修复问题
如果还有问题，试试下面的配置，其实 js、css、png 文件我们不需要转到 index.html

location / {
root html;
rewrite ^.+(?<!js|css|png|map)$ /index.html break;
index index.html index.htm;
}
结语
遇到问题，先分析下具体的原因，一步一步排查，总归还是有解决办法的。出现 404，空白页，JS 问题，总觉得是我们前端哪儿有问题，排查完才发现是配置问题，以上几招供大家参考，能解决问题的方法就是好方法！