Vue的打包问题及一些webpack问题

资源找不到的问题

在vue npm run build 打包的时候 assetsPublicPath: '/',    // 编译发布上线路径的根目录，可配置为资源服务器域名或 CDN 域名

我个人理解的就是在哪里引用资源（static）  因为打包后只有index.html 和static文件  所以引用的资源都在static里面 

如果是"/" 引用时就是 /static   如果是"./"引用时就是 ./static  如果是https://static.vilson.xyz/project/ 引用的时候就是 https://static.vilson.xyz/project/static 

通常会放在服务器的index.html 会放在服务器的根目录下  所以默认是"/" 就直接可以找到static  但是如果不是放在根目录下  或者在本
地的dist dist 不是根目录时 则需要修改

迎合网上的上线路径根目录  可以理解为  定义哪个是根目录  “/” 所在文件夹的根目录就是根目录 “./”当前文件夹是根目录 “http:”这个 文件夹是根目录   而index.html 和static  是必须放在根目录下的

所以我们修改成

assetsPublicPath: './',  有index.html 的目录就是根目录了 即可

需要注意的是 config 有两个assetsPublicPath:  其中dev 是开发环境的  build 是打包环境的我们需要修改的是build 生产环境的不要改错了

此外 有两种情况这个方法解决不了

1 ：src 引用图片的问题

  使用 v-bind:src 完全不受打包规则的影响 开发时数据是什么打包后还是什么 

 所以我个人建议 将这里需要的图片放在static中  

原因：static里面原有的东西不受打包影响图片位置不变  然后打包后index.html要想引用里面的图片  所以要想打包后能引用到static里面的图片 则需要  :src:"./static"

然而在实际开发中 我们使用 ./static则找不到资源了 本着强迫症的原则  如果我们的index.html与static是放在了服务器下的根目录中 :src:"/static/" 即可 在开发环境中static在根目录下   在生产环境（服务器下也是在根目录下 所以都可以使用）

如果不是在根目录下我们就需要像 ./static这样 考虑一下线上如何在html中引用到static的路径了   一般直接./就可以了因为通常放一起

但是  还有第二种情况

背景图路径 因为这是css里面的 所以只修改confing下的是不可以的  具体原理也就不说了 直接说怎样修改吧

直接找到build 文件夹下的utils.js

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../' // 作用是设置打包过程中提取css的方法
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

有时候我们需要在手机上查看开发的效果  （先不打包呢） 有两种方法

手机测试
通过IP地址访问的话
修改package.json的
 "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
在config 的index.js的host  改成 "0.0.0.0"
然后访问自己电脑的ip:8080就可以了