1. 程式人生 > >vue+nginx配置不帶#的路徑訪問

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>