版本说明：

Vue-cli：2.x

Nginx：1.16.x

Vue去掉URL中的#

我们在访问Vue项目时，地址栏长这样：localhost:8080/#/home/index或者10.51.34.153/#/login

地址栏中出现的#，是什么作用，能不能去掉？

我们先看Vue Router中给的说明：Vue官网链接

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

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

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

总结一下，地址栏有两种模式：

1. hash模式：地址栏包含#，#之后的不被获取
2. history模式：具有对url历史进行修改的功能

那么我们如何去掉地址栏中的#呢？，正如上述官网说明一下，我们自需要在new VueRouter时添加一行model的配置即可

源代码如下：

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

注：上述代码添加的位置要根据各位实际项目的router配置文件而定哟！

添加完上述代码后，重新访问项目我们就发现地址栏的#消失。

PS：开发过程中，项目运行没有问题，待打包部署后会出现404等问题，请继续往下看：

mode: 'history'后访问首页报404错误

完成上述配置后我们访问部署在nginx下的系统时，发现报了很多404的错误，但这些错误在本地开发时没有发现，如下图：

 其实官网也进行相应的说明和配置例子：Vue官网链接

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

 所以错误本身不在vue项目而是在我们的后端上，我们需要修改后端配置来解决这个问题，

官方例子：

注意：下列示例假设你在根目录服务这个应用。如果想部署到一个子目录，你需要使用 Vue CLI 的 publicPath 选项 和相关的 router base property。你还需要把下列示例中的根目录调整成为子目录 (例如用 RewriteBase /name-of-your-subfolder/ 替换掉 RewriteBase /)。

#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)
})

#基于 Node.js 的 Express

对于 Node.js/Express，请考虑使用 connect-history-api-fallback 中间件。

#Internet Information Services (IIS)

1. 安装 IIS UrlRewrite
2. 在你的网站根目录中创建一个 web.config 文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

#Caddy

rewrite {
    regexp .*
    to {path} /
}

#Firebase 主机

在你的 firebase.json 中加入：

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

 这里我使用的是nginx，所以安装官方实例进行了nginx的配置：

修改配置前nginx conf内容：

server {
        listen       8003;
        server_name  localhost;
        root	html/demo;
        location / {
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
 
    }

 修改后：

server {
        listen       8003;
        server_name  localhost;
        root	html/demo;
        location / {
            try_files $uri $uri/ /index.html;
        }

        error_page   500 502 503 504  /50x.html;
 
    }

 修改后再次访问服务器的系统，发现404错误已被解决。

报Loading chunk xxx failed，Unexpected token < 错误

完成nginx配置后，再次系统时发现又出现了下列错误，（内心；一朝改配置、bug无限多）

Uncaught SyntaxError: Unexpected token '<'
vendor.414d6cad290f10a9dfeb.js:1 Error: Loading chunk 3 failed.
    at HTMLScriptElement.u (manifest.ca82163d0a5dabe8a5f8.js:1)

这个问题原理我也不太清楚，不过安装以下方式去调整配置后问题解决：

修改项目config/index.js中build的assetsPublicPath值，

修改前：

module.exports = {
  dev: {
    // 省略其配置内容......
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../demo/index.html'), // 模板文件生成路径
    // Paths
    assetsRoot: path.resolve(__dirname, '../demo'), // 打包后文件要存放的路径
    assetsSubDirectory: 'static', // 除了 index.html 之外的静态资源要存放在assetsRoot下的什么路径，
    assetsPublicPath: './', // 代表打包后，index.html里面引用资源前面需要添加的地址

    // 省略其他配置内容......
  }
}

修改后：

module.exports = {
  dev: {
    // 省略其配置内容......
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../demo/index.html'), // 模板文件生成路径
    // Paths
    assetsRoot: path.resolve(__dirname, '../demo'), // 打包后文件要存放的路径
    assetsSubDirectory: 'static', // 除了 index.html 之外的静态资源要存放在assetsRoot下的什么路径，
    assetsPublicPath: '/', // 代表打包后，index.html里面引用资源前面需要添加的地址

    // 省略其他配置内容......
  }
}

注：这里是将assetsPublicPath的值由'./'改为'/'，去掉了.号，网络上很多配置教程都是使用的'./'，那是因为router使用的是mode: 'hash'模式

重新打包部署后，系统终于能够正常访问所有页面和资源了，真是不容易！

 

 

手编不易，转载请注明来源，谢谢！

欢迎评论区留言讨论