关于vue.js:vuecli30配置多页history路由模式

32次阅读

共计 627 个字符，预计需要花费 2 分钟才能阅读完成。

1、在对应的多页目录下的 router.js 配置 history

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

注：router 外面的 base 属性是我的项目部署服务器的目录门路，例如你的我的项目拜访门路是 www.xxx.com/mobile/share
2、在 vue.congig.js 增加代码

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

注：from 指你多页中进入其中一个页面 index 的路由门路，to 示意重写到 yy.html 至于多页配置自行搜寻，留神的是批改 vue.config.js 须要重新启动才会失效。
3、重启输出 localhost:8080/xx 就能够拜访到 yy.html 的代码
补充：如果部署到 nginx 服务器，发现报 404，就须要 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 上面的文件部署的根目录

正文完