vue项目将自定义的文件打包进去

需求：我们在自己的vue项目中创建了一个文件夹，里面有一些文件，现在想打包的时候将他打包到dist文件夹中？怎么办？

如果你什么都不处理的话，你自己创建的文件肯定是不会打包到dist文件夹的，这个我亲测过。这个问题是我这两天遇到的问题，当时我的需求是，想将一个html文件给打包一下，其实上是想实现一下vue文件跳转到html文件的需求。跳转是实现了。但是最终打包如何处理呢？？？？？？

我就在网上找答案，网上的答案五花八门，各种都有，没一个靠谱的，在找的过程中我又发现了一个问题，还需要先确定一下  我这个项目是属于vue2还是vue3的项目，因为我明显发现我目前的这个项目和我之前的那个项目结构明显不一样，之前的那个项目的配置文件是  vue.config.js  ，现在的这个是webpack.config.js 。所以，就有了上一篇的如何确认项目是那个vue版本的文章。

版本确定好之后，搜索的结果就缩小了很多，发现了一个靠谱的答案，其实vue2的配置文件是依靠webpack来实现的，也就是最开始的vue项目结构，所以，还是得需要配置webpack插件来实现这个需求。

操作起来也很简单。下面来演示一下

第一步  下载依赖

npm install --save-dev copy-webpack-plugin@4.6.0

注意！版本很重要，一定要带上版本，不能过高，过高就会报错，这个坑我亲测过。哎

第二步  修改配置webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')


plugins: [
    new CopyWebpackPlugin(
        [
          {
            from: resolve(__dirname, 'public'),
            to: resolve(__dirname, 'dist'),
          }
        ]
    )
]

但是上面的写法，只是将public文件夹里面的文件给打包到了dist文件夹，而没有将public文件夹也一块打包进去。所以我们要自己创建一个文件夹。也很简单，把目的路径加上就好了。

new CopyWebpackPlugin(
        [
          {
            from: resolve(__dirname, 'public'),
            to: resolve(__dirname, 'dist/public'),
          }
        ]
    )

如果你还想忽略某些文件的话，可以这样写

new CopyWebpackPlugin(
        [
          {
            from: resolve(__dirname, 'public'),
            to: resolve(__dirname, 'dist/public'),
            ignore : [
              '*.css'
            ]
          }
        ]
    )

好了。这就可以了。

如何区分vue2还是vue3项目

给浏览器F12控制台添加提示文字的代码

吉利帝豪第四代上手体验

推荐一个程序猿开发必备的工具集网站

Mysql匹配多个索引的时候是如何选择索引的