vue/cli 路由器中的基本参数是什么? [英] What for is base parameter in router in vue/cli?

问题描述

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

I created new @vue/cli 4.0.5 app and in file src/router/index.js I see :

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

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

I do not have any BASE_URL parameter in .env at my local and running under the localhost with command :

npm run serve

我在当地工作正常

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

I deployed the app under live server under apache(ubuntu 16) into hosting root also not using this parameter.

是什么?和publicPath( https://cli.vuejs.org/config/#publicPath )?

What is it ? Is it the same as publicPath( https://cli.vuejs.org/config/#publicPath )?

推荐答案

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

process.env.BASE_URL is automatically injected into Webpack configuration by Vue CLI with the value specified in CLI config (vue.config.js) variable publicPath

来自文档:

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

The base URL your application bundle will be deployed at. This is the equivalent of webpack's output.publicPath, but Vue CLI also needs this value for other purposes, so you should always use publicPath instead of modifying webpack output.publicPath

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

By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set publicPath to '/my-app/'

因此在 Webpack 中 它用于链接到其他资源(图片、字体、代码分块时的代码块)

So in Webpack it is used to link to additional resources (images, fonts, code chunks when code-splitting)

同样的目的在 Vue Router 中，因为它还通过 <router-link>

The same purpose is in Vue Router because it also creates links (to other parts of your application) via <router-link>

例如这条路线:

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

这在你的模板中:

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

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

If router is set to base: '/' (default), the link will be rendered as

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

但是使用 base: '/my-app/'，链接变为

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

您可以在此处

这篇关于vue/cli 路由器中的基本参数是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！