3 
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
{
  path: '/home',
  name: 'home',
  component: () => import(  /* webpackChunkName: "[request]" */
    `@/views/Home.vue`)
},
{
  path: '/about',
  name: 'about',
  component: () => import(  /* webpackChunkName: "[request]" */
    `@/views/About.vue`)



}
  ]
})

预计分块输出 About-vue.de9bf8b8.js app.cb7314dd.js chunk-vendors.cc2e3269.js Home-vue.de9bf8b8.js.map

但实际结果是 [request].de9bf8b8.js app.cb7314dd.js chunk-vendors.cc2e3269.js

当我省略 [request] 或尝试使用类似的功能时

function getComp(fileName)

{

console.log(‘func called’)

return ()=>import(/* webpackChunkName: “[request]” */ @/views/${fileName}.vue)

}

在这种方法中它可以工作，当我省略 [request] 时它也可以正常工作，但是如果没有正确的名称，我的包很难管理和调试

4

2 回答 2

0

魔术注释不会被动态替换。并且在任何使用注释名称的地方都会按该名称将资产分组为一个块

于 2019-02-12T02:55:21.687 回答
0

如果您只是在寻找正确的名称，请使用组件的名称而不是[request]块名称。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/home',
      name: 'home',
      component: () => import(  /* webpackChunkName: "Home" */ `@/views/Home.vue`)
    },
    {
      path: '/about',
      name: 'about',
      component: () => import(  /* webpackChunkName: "About" */ `@/views/About.vue`)
    }
  ]
});

占位符用于根据[request]条件导入文件。假设您有多个语言环境，如下所示。

> locales/en.js
> locales/bn.js

然后，您将根据用户的偏好导入其中之一。然后按如下方式导入：

const lang = "en";
import(/* webpackChunkName: "[request]" */ `./locales/${lang}`).then(lang_module => {
    // do something with english locale
});

当 webpack 构建它们时，它会将两个语言环境保存为它们的原始文件名。您还可以使用locale-[request]将它们分别保存为locale-en和locale-bn。

但是，当您确定要导入哪个文件时，为什么要使用[request]? 只需使用您已经知道的名称即可。有关更多信息，请参阅魔术评论。

于 2019-02-13T14:57:57.203 回答