vue+nginx配置不帶#的路徑訪問
vue+nginx去掉路徑中的#
nginx代理多個web專案,所以新增的vue web專案不能直接使用location /
現在有一個專案distribute,vue改動如下
1.修改路由src/router/index.js
export default new Router({
base: '/distribute/', //多專案情況下的本專案名稱
mode:'history', //這個是去除路徑中顯示的#
routes: [...] //正常設定的路由資訊
})
2.修改build,config/index.js
build: {
// Template for index.html
index: path.resolve(__dirname, '../distribute/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../distribute'),
assetsSubDirectory: 'static',
assetsPublicPath: '/distribute/', //一般把原來的'/',改為'./'即可編譯使用,多專案情況下加了專案名稱
.....
}
3.修改index.html
<!DOCTYPE html>
<html>
<head>
<meta base="/distribute/"> <!-- 多專案情況下加上專案名稱 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<title>distribute</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>