我想控制由Vue应用程序和Webpack生成的文件的文件名。 我想要托管构建好的应用程序的环境不喜欢带有点号“.”的文件名(别问我为什么)。通过使用vue.config.js configureWebpack入口中的output.filename,我已经可以通过获取js文件来遵守“连字符”命名方案,但是css文件没有重命名。因为我正在加载两个打包文件而不是块,所以我可以手动重命名单个css文件。 但是运行时会出现错误。
Error: Loading CSS chunk error failed.
(/my-path/resources/css/error.d0f9a634.css)
我希望在构建过程中强制所有CSS文件(包括错误文件)重命名。
我的vue.config.js文件:
module.exports = {
outputDir: path.resolve(__dirname, 'dist'),
publicPath: "/my-path/resources",
configureWebpack: {
optimization: {
splitChunks: false
},
output: {
filename: "[name]-js",
chunkFilename: "[name]-chunk-js",
// get cssFilename() {
// return "[name]-css";
// }
},
resolve: {
alias: {
'vue$': path.resolve('./node_modules/vue/dist/vue.common.js'),
},
},
},
// https://cli.vuejs.org/config/#productionsourcemap
productionSourceMap: false,
// https://cli.vuejs.org/config/#css-extract
css: {
extract: { ignoreOrder: true },
loaderOptions: {
sass: {
prependData: '@import \'~@/assets/scss/vuetify/variables\''
},
scss: {
prependData: '@import \'~@/assets/scss/vuetify/variables\';'
}
}
},
// ...
}
我已经开始研究 MiniCssExtractPlugin
,但不确定这是否是正确的方向。任何帮助都将不胜感激。