vue/cli中router中的base参数有什么用？

Question

我创建了新的 @vue/cli 4.0.5 应用程序，并在文件 src/router/index.js 中看到：

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

我在本地的 .env 中没有任何 BASE_URL 参数，并且在本地主机下使用命令运行：

npm run serve

我在本地工作没问题

我将 apache(ubuntu 16) 下的实时服务器下的应用程序部署到托管根目录中，也没有使用此参数。

它是什么 ？它与 publicPath ( https://cli.vuejs.org/config/#publicPath )相同吗？

Answer 1

process.env.BASE_URL由 Vue CLI自动注入到Webpack 配置中，并使用 CLI config ( vue.config.js) 变量publicPath中指定的值

它是干什么用的 ？

来自文档：

您的应用程序包将部署到的基本 URL。这相当于 webpack 的output.publicPath，但是 Vue CLI 也需要这个值用于其他目的，所以你应该始终使用publicPath而不是修改 webpackoutput.publicPath

默认情况下，Vue CLI 假设您的应用程序将部署在域的根目录下，例如https://www.my-app.com/. 如果您的应用程序部署在子路径中，则需要使用此选项指定该子路径。例如，如果您的应用程序部署在https://www.foobar.com/my-app/，请将 publicPath 设置为'/my-app/'

因此在 Webpack 中它用于链接到其他资源（图像、字体、代码分割时的代码块）

Vue Router 也有同样的目的，因为它还通过以下方式创建链接（到应用程序的其他部分）<router-link>

例如这条路线：

    {
      path: "/page1",
      name: "Page 1",
      component: Page1
    }

在你的模板中：

<router-link to="/page1">Page 1</router-link>

如果路由器设置为base: '/'（默认），链接将呈现为

<a href="/page1" class="">Page 1</a>

但是有了base: '/my-app/'，链接就变成了

<a href="/my-app/page1" class="">Page 1</a>

您可以在此处阅读有关绝对 URL 与相对 URL 的更多信息