vue-cli3.0配置多頁history路由模式

一、在對應的多頁目錄下的router.js配置historyhtml

const router =  new Router({
  base: '/mobile/share',
  mode: 'history',
  },

注:router裏面的base屬性是項目部署服務器的目錄路徑,例如你的項目訪問路徑是www.xxx.com/mobile/share
二、在vue.congig.js添加代碼vue

configureWebpack: {
        devServer: {
            historyApiFallback: {
                verbose: true,
                rewrites: [
                    { from: '/xx', to: '/yy.html'}
                ]
            }
        }
    },

注:from指你多頁中進入其中一個頁面index的路由路徑,to表示重寫到yy.html 至於多頁配置自行搜索,注意的是修改vue.config.js須要從新啓動纔會生效。
三、重啓輸入localhost:8080/xx就能夠訪問到yy.html的代碼
補充:若是部署到nginx服務器,發現報404,就須要nginx部署修改下代碼nginx

location / {
            root   /software/vue/dist;
            index  index.html;
                try_files $uri $uri/ /index.html;
        }
        location /xx {
                root   /software/vue/dist;
                index  yy.html;
                try_files $uri $uri/ /yy.html;
        }

root:項目dist下面的文件部署的根目錄服務器

相關文章
相關標籤/搜索