使用webpack [请求]神奇的注释就是将动态模块捆绑在一起
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`)
}
]
})预期输出关于-vue.de9bf8b8.js app.cb7314dd.js块-vendors.cc2e3269.js主页-vue.de9bf8b8.js.map的块
但实际结果是request.de9bf8b8.js app.cb7314dd.js chunk-vendors.cc2e3269.js
当我省略请求或尝试使用如下函数时
function getComp(fileName)
{
console.log(‘func called’)
return ()=>import(/* webpackChunkName: “[request]” */ @/views/${fileName}.vue)
}在这种方法中，当我省略请求时，它也工作得很好，但是如果没有正确的名称，我的包很难管理和调试
回答 2
Stack Overflow用户
发布于 2019-02-12 10:55:22
神奇的注释不会被动态替换。无论在何处使用注释名称，都会按该名称将资产分组到单个块中
Stack Overflow用户
发布于 2019-02-13 22:57:57
如果您只是在寻找合适的名称，请使用组件的名称而不是[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]？只要使用你已经知道的名字即可。有关详细信息，请参阅magic comments。
https://stackoverflow.com/questions/54518000
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号