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

如何解决更改从延迟加载的 VueJS 组件中提取的 CSS 的位置

我使用 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 文件的块的名称以及它们所在的路径是错误的。

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

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

这适用于 JS 文件。

我有一个用于 plugins 的 MiniCssExtractPlugin 条目，它重命名了磁盘上的结果 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/ 路径并设置正确的名称，它们会按预期工作并正常加载。但显然这很乏味且不可扩展..

谢谢！

解决方法

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

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

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

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

同样在 MiniCssExtractPlugin 选项和 Webpack output 选项中，我能够让所有磁盘文件名和入口点加载器函数中的文件名匹配。

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