前言:很多时候我们在打包vue项目时都会遇到在不同环境下需要将某个文件拷贝到某制定目录下,如配置文件,访问校验文件等。这时就需要copy-webpack-plugin这一插件。
1、下载插件CopyWebpackPlugin
npm install copy-webpack-plugin@6.1.1 --save-dev
2、在vue.config.js中进行配置
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new CopyWebpackPlugin({
patterns: [
// { from: '要拷贝的文件', to: '要拷贝到的路径(不写默认是打包的根目录)' }
// { from: 'src/abc.txt', to: 'abc.txt' }
{ from: 'src/abc.txt' } // 或不写to
]
})
]
}
}
注意:
CopyWebpackPlugin务必
要使用6.1.1版本
(其他版本的new CopyWebpackPlugin()的参数语法不同)
补充:
如果报错,则说明CopyWebpackPlugin
插件的版本与webpack的版本不匹配,不用慌。
大家再试试5.0.0版本,再不行试试最新版。
npm安装插件:
npm install copy-webpack-plugin@6.1.1 --save-dev
npm卸载插件:
npm uninstall copy-webpack-plugin --save-dev
参考链接:
vue项目打包时将某文件复制到制定目录下_vue 打包到指定目录_Big_LiuSir的博客-CSDN博客vue-cli通过webpack把.txt文件打包到dist文件夹下并且和index.html在同一级目录_西风XF的博客-CSDN博客TypeError: compilation.getCache is not a function_typeerror: babeljest.getcachekey is not a function_寻水的鱼lj的博客-CSDN博客Invalid options object. Copy Plugin has been initialized using an options object that does not match_伏地躲猫猫的博客-CSDN博客
复制-webpack-plugin - npm (npmjs.com)