更改从延迟加载的 VueJS 组件中提取的 CSS 的位置答案

【问题标题】：Change location of extracted CSS from lazy-loaded VueJS component更改从延迟加载的 VueJS 组件中提取的 CSS 的位置
【发布时间】：2021-04-12 11:52:45
【问题描述】：

我正在使用带有延迟加载的 VueJS 2 和 vue-custom-element，如下所示：

Vue.customElement('nav-icon', () => new Promise((resolve) => {
    require(['./NavIcon.vue'], (lazyComponent) => resolve(lazyComponent.default));
}), {
    beforeCreateVueInstance
});

这样我就可以将 JS 和 CSS 上传到 Shopify 主题中并使用 <nav-icon> 来显示自定义组件。

除了在我的主入口点 JS 文件中，CSS 文件的块的名称和它们所在的路径是错误的之外，一切正常。

在我的vue.config.js 文件的configureWebpack 部分中，我将输出设置为：

output: {
    filename: '[name].js',
    chunkFilename: 'my-prefix-[name].js'
}

这适用于 JS 文件。

我有一个MiniCssExtractPlugin 的plugins 条目，它重命名了磁盘上生成的 CSS 文件：

new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: 'my-prefix-[name].css'
})

但这不会更新入口点 JavaScript 中的名称（它们缺少“my-prefix-”），因此在请求时，它们都是 404..！

在入口点 JavaScript 中，它们都在 css/ 文件夹下请求，我无法使用。

我该怎么做：

A) 正确重命名 CSS 块，以便磁盘上的文件名和入口点 JavaScript 中请求的内容匹配

B) 更改入口点 JavaScript 认为它们所在的 css/ 路径。我不能使用子文件夹，因为 Shopify 主题资产不支持子文件夹，一切都必须是顶级的

如果我手动编辑生成的入口点文件以删除 css/ 路径并设置正确的名称，它们会按预期工作并正常加载。但显然这是乏味且不可扩展的..

谢谢！

【问题讨论】：

标签： css vue.js webpack lazy-loading custom-element

【解决方案1】：

原来我忽略了Vue CLI docs 的一部分，您可以在其中将对象传递给extract。

除了true，如果您想进一步配置此插件的确切功能，您还可以传递mini-css-extract-plugin 的选项对象。

所以使用（在vue.config.js 的css 部分）：

extract: {
    filename: '[name].css',
    chunkFilename: 'prefix-chunk-[contenthash].css'
}

在 MiniCssExtractPlugin 选项和 Webpack output 选项中也是如此，我能够使入口点的加载器函数中的所有磁盘文件名和文件名匹配。

感谢 VueJS Discord 服务器上的@benyuanzhang 指出。

【讨论】：