Vue-Cli2.XX 静态资源文件夹的路径部署问题

直接进入正题,这里我们讨论的是vuecili3以前的版本：

一般我们用vuecli3之前的版本创建项目的时候，根目录下会有一个static文件夹，这个文件夹是用来放置images和json等静态文件的，同样的在根目录下的src下还有一个assets文件夹放置静态文件的，区别是assets里面的静态资源会被webpack打包编译，而static下面的静态资源仅仅会被在打包编译的时候赋值到dist文件夹下；所以一般项目开发都会把小一点的图片放在assets里面，直接打包为base64的文件，而其他的静态资源放在static文件下，放在assets的好处是图片直接编译为base64代码，等于压缩了体积，好处显而易见，可是同样是压缩，为啥不把静态资源全部放在assets文件夹下呢？网上说放在static文件夹下的文件部署在服务器的时候方便利用缓存加载。。。这个我具体还没有研究，等过段时间再研究；

那么本文的重点不是以上要讨论的，我这里说的是，路径问题！！！如果按照默认vuecli的配置，那么打包后的文件就会出现在dist目录下，dist目录下有一个index.html文件和static文件夹，如果要部署在服务器端，如果没有别的要求，那么直接把dist里面的文件丢到服务器根目录就好了，如果服务器是node搭建的，那就要开启static文件夹的权限访问了。。。这样一个前端文件就部署在服务器端了！

可是！可是！可是在服务端有时候它会有自己的静态文件夹比如public，为了统一，为什么不把static下的静态文件放在public下面，方便后期后端服务器对静态资源的增删改查操作呢！这个时候你如果直接把static目录丢到public目录，那是不行的，因为前端开发早已经把静态资源的路径写好了，如果丢在public下，那就得重修修改前端代码，那么问题来了，前端你再去修改你的代码吧，所以啊。。。。一般在开发之前，后端会把服务端的目录结构告诉前端，这样前端就会在撸代码的时候，去配合后端的目录结构，就比如，我们要解决静态资源必须放在后端public文件夹下，部署后能够正常访问的问题，那前端改如何配置呢？

前端：

1、删除static文件夹，在根目录创建public文件夹，接着在public文件夹下创建static文件夹；

2、配置：

（1）、修改config目录下的index.js代码，请注意：这里修改的开发模式的路径配置，这里的配置主要还是copy-webpack-plugin插件用到的路径：

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'public/static',
    assetsPublicPath: '/',
    proxyTable: {},

接着修改webpack.dev.config.js文件，这里也改为public/static：

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

以上是开发模式的文件修改，就是说你现在运行npm run dev 文件是可以正常运行在浏览器调试的，（这里有个不明白的地方，就是为什么在开发模式下，也去设置copy-webpack-plugin这个插件的路径呢？，感觉开发模式没必要，所以我们上面的设置，大家会发现，拷贝的文件和源文件的地址相同，所以等于没拷贝），可是我们的目的是打包编译后文件能够在服务端部署，好的，我们接着配置build模式下的配置，在index.js文件：

 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    //除了 index.html 之外的静态资源要存放的路径
    assetsSubDirectory: 'public/static',
    //代表打包后，index.html文件里面src引用js,css资源的的相对地址
    assetsPublicPath: '/',

在webpack.prod.config文件下：

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

其实和dev模式下的配置基本一样；

有人可能会问，我们只是build打包文件，为啥还要在dev模式下设置呢？原因是我们在刚开始删除了static目录，如果我们运行npm run dev，就会报错，说static目录找不到，就没法做调试了，所以开发模式的配置也是要改的，最后我们在所有的配置完毕后，运行npm run build，就会正常打包编译了，打包好后就会发现在dist目录下多了一个public文件，点击打开会有static目录。。。然后我们将dist下的所以文件丢到服务端根目录，就可以正常浏览了，（记得开启public访问权限），我们这么做看似没有多大用处，实际上，当我们的文件要部署的时候，只要前端静态文件被服务度要求放在非根目录，我们就可以按照上面的方法根据服务端的要求去灵活配置我们的前端文件目录了。。。。。

听说vuecli3已经调整了目录结构，里面已经有了public目录，估计就是这个原因吧，现在还没研究。。。以上思路有不对的地方，希望大神多指点