vue 项目中的 public、static及指定不编译文件

public 文件夹的纠结

这些天在自做项目时发现，自做的项目居然没有 public 文件夹，我另一个项目却有，一个是 vue@2.6.11，一个是 vue@2.6.14，两个都是用 vue/cli 搭建，版本如此接近结果却不同！（跑项目命令跟打包命令都不同，一个是用封装好的 vue-cli-service，一个是 webpack-dev-server）。后来到网上查了下相关情况，才知道自做的项目虽然没有 public 文件夹，但有 static 文件夹，功能都相同，不编译直接复制到包里。后来在两个项目的代码中找到依据。

// copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])

// copy static assets in public/
   const publicDir = api.resolve('public')
   if (!isLegacyBundle && fs.existsSync(publicDir)) {
     webpackConfig
       .plugin('copy')
         .use(require('copy-webpack-plugin'), [[{
           from: publicDir,
           to: outputDir,
           toType: 'dir',
           ignore: publicCopyIgnore
         }]])
   }

自己指定文件不编译

在查找上面的疑或中，发现了其实能够自己指定某些文件为不编译，直接复制到打的包里。就是用插件 copy-webpack-plugin 来实现，如同上面两个，都是 vue 项目默认指定的不编译文件夹。我的项目是在 build/webpack.prd.conf.js 中修改：

new CopyWebpackPlugin([
     // 指定 public 文件夹不被编译 -- 示例
    {
        from: path.resolve(__dirname, '../public'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
    },
    // 指定 static 文件夹不会被编译 -- 默认已加
    {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
    },
    // 指定不被编译的文件及输入的文件位置、名称
    {
        from: path.resolve(__dirname,  '../static/study/images/logo_vue.png'), // 指定文件
        to: path.resolve(config.build.assetsSubDirectory,  'logo.png'), // 指定输出位置、名称
        ignore: ['.*']  // 忽略的文件
    }
])

public、static、指定不编译的文件跟 assets 的区别

相同点都是存放一些静态资源。

不同点：
不编译的文件：一般是不怎样变动的文件，比如第三方文件，不会被 webpack 解析，直接复制到打包的目录里，需使用绝对路径来引用。
assets： 存放相对变动性的资源，会被 webpack 当作模块来解析，最终生成相关依赖的编译文件，需要使用相对路径来引用。