某个vue项目打包后,有些静态资源的存放位置不太符合预期,导致访问这些资源的时候404。
希望改变打包后这些资源的存放位置,使其能够被正确访问。
一开始考虑的是copy-webpack-plugin - npm插件,但这个插件的本质是复制文件,虽然也能实现最终效果,但不符合程序员节能的思想,不想存在两份一模一样的文件,只想做移动操作。
最后,选用filemanager-webpack-plugin - npm
如下,
打包后为
- dist
- index.html
- svg
- cmdb
- css
- fonts
- img
- js
想将 svg 整个文件夹移动到 dist/cmdb里面去
vue.config.js修改如下
const FileManagerPlugin = require('filemanager-webpack-plugin')
module.exports = {
// app部署路径
publicPath: '/',
// build目录
outputDir: 'dist',
assetsDir: SYSTEM_ID,
configureWebpack: {
output: {
......
},
plugins: [
new FileManagerPlugin({
events: {
onEnd: {
move: [
{ source: './dist/svg', destination: './dist/cmdb/svg' }
]
}
}
})
]
},
......
}