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

前言

众所周知 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

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

除了 mod_rewrite，你也可以使用 FallbackResource

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 $uri/ @router;
    index  index.html index.htm;
}
location @router {
    rewrite ^.*$ /index.html last;
}

Uncaught SyntaxError: Unexpected token <错误

配置好了刷新后一片空白？打开控制台一看什么鬼，Uncaught SyntaxError: Unexpected token <错误？

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

• 错误排查

检查配置有没有问题：

1. 检查 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,
    ..... 其他代码略

2. 检查模式是否为 history

const router = new VueRouter({
 mode: 'history',
 routes: [...]
})

3. 检查路由路径
   你的子路径需要加上去，给每一个 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 问题，总觉得是我们前端哪儿有问题，排查完才发现是配置问题，以上几招供大家参考，能解决问题的方法就是好方法！

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦