vue-element-admin通过webpack把.txt文件打包到dist文件夹下并且和index.html在同一级目录

前言:很多时候我们在打包vue项目时都会遇到在不同环境下需要将某个文件拷贝到某制定目录下,如配置文件,访问校验文件等。这时就需要copy-webpack-plugin这一插件。

1、下载插件CopyWebpackPlugin 

npm install [email protected] --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 [email protected] --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)
 

你可能感兴趣的:(vue,webpack,vue,element,dist,打包)