Vue 路由器和 webpack - 历史模式配置 localhost [英] Vue router and webpack - history mode config localhost

问题描述

基本上，我使用 Vue cli 和 webpack 模板，我需要在 vue 路由器中使用历史模式，但我使用参数作为路由.

我阅读了这个文档:https://router.vuejs.org/en/essentials/history-mode.html我也看这个帖子:开发服务器Vue.js中的vue路由器(历史模式)问题 - 无法获取/配置"

所以我将 webpack.dev.conf.js 从:

historyApiFallback:{改写:[{ from:/.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },],}

到

historyApiFallback: true

现在我在尝试访问带有参数的页面时得到一个空白页面.有什么线索吗?

解决方案

更新:

我在 Vue 论坛中公开了这个问题，@LinusBorg 帮助我了解 vue-router 和历史模式会发生什么:

https:///forum.vuejs.org/t/vue-router-and-webpack-history-mode-config-localhost/27880/12

基本上，他建议在 webpack/config 文件上不应该改变任何东西(我 [LinusBorg] 维护这个模板)".当我更改为相对路径时，它坏了.

因为我需要它来将项目交付到子文件夹，他推荐了几个步骤:

<块引用>

1. 如果没有绝对路径，历史模式就无法真正工作.当您直接访问子路由时，aset 文件的相关路径将中断.这不是您能够解决的问题.
2. 如果您想从子文件夹提供服务，您必须通过设置 base1 选项让路由器知道这一点.
3. 您还在配置中将 write 子文件夹设置为 assetsPublicPath(对于构建和开发，除非您使路由器的基础根据环境切换).

然后，带有参数的页面仍然损坏，因为服务器(甚至本地主机)需要按照此处的说明进行配置:https://router.vuejs.org/en/essentials/history-mode.html

Basically, I'm using Vue cli with webpack template and I need to use history mode in vue router, but i'm using params for a route.

I read this doc: https://router.vuejs.org/en/essentials/history-mode.html and I look this thread too: Problems with vue router (history mode) in development server Vue.js - "Cannot GET /config"

So I change webpack.dev.conf.js from:

historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    }

to

historyApiFallback: true

Now I get a blank page when tried to access a page with params. Any clue?

解决方案

UPDATE:

I exposed this question in Vue Forum and @LinusBorg help me to understand what happens with vue-router and history mode:

https://forum.vuejs.org/t/vue-router-and-webpack-history-mode-config-localhost/27880/12

Basically, he recommends to "should not have to change anything (I [LinusBorg] maintain this template)" on webpack/config files. As I changed to relative paths, it broken.

As I need it to deliver the project to a sub-folder, he recommends fews steps:

1. history mode can’t really work without absolute paths. Releative paths to aset files will break when you visit a subroute directly. That’s not something you will be able to work around.
2. If you want to serve from a subfolder, you have to let the router know about that by setting the base1 option.
3. you also have set write subfolder as the assetsPublicPath in the config (for both build and dev, unless you make the router’s base switch according to environment).

Then, the page with params stills broken, because the server (and even localhost) need to be config as documented here: https://router.vuejs.org/en/essentials/history-mode.html

这篇关于Vue 路由器和 webpack - 历史模式配置 localhost的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！