VUE項目地址去掉 # 號的方法，vue 項目往往會搭配 vue-router 官方路由管理器，它和 vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。vue-router 默認為 hash 模式，使用 URL 的 hash 來模擬一個完整的 URL，所以當 URL 改變時，頁面不會重新加載，只是根據 hash 來更換顯示對應的組件，這就是所謂的單頁面應用。
但是使用默認的 hash 模式時，瀏覽器 URL 地址中會有一個 # ，這跟以往的網站地址不太一樣，可能也會讓大部分人不習慣，甚至覺得它很丑。
想要去掉地址中的 # 也不難，只要更換 vue-router 的另一個模式 history 模式即可做到。如下：
當你使用 history 模式時，URL 就變回正常又好看的地址了，和大部分網站地址一樣，例如：http://zztuku.com/name/id
不過，這種模式有個坑，不僅需要前端開發人員將模式改為 history 模式，還需要后端進行相應的配置。如果后端沒有正確的配置好，當你訪問你的項目地址時，就會出現 404 ，這樣可就更不好看了。
官方給出了幾種常用的后端配置例子：
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>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)
})IIS：
<?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"
}
]
}
}以上，就是VUE項目地址去掉 # 號的方法，更多也可以參考：https://router.vuejs.org/zh/guide/essentials/history-mode.html
