这两天一直在忙活着搞自己的服务器，想着怎么把用webpack打包的项目部署到服务器上呢，就打算init一个vue的创建示例，当我跑所有人都知道的npm run build的时候，好开心，幸福来得就是这么突然：

第一个问题来了：打包部署的时候，index.html空白

高兴的我，赶紧把dist代码改了一下名字initApp，扔到服务器上一跑，结果没有出来，然后就直接点击一下dist的index.html，好家伙，出来这个：

Terminal报错：

 

这段话的意思就是说：构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作。

浏览器报错误：

看到这里，基本上就明白怎么回事了，直接去我的电脑下找static，找到才怪，兴奋的差了一下编译出来得index.html,果然：

 

找到问题了，赶紧把href和src后面的路径换成相对路径，即"/static"换成"./static"，好了，真的好了。

那么问题来了，怎么在编译的时候，就能正常的编译出相对路径呢？

我们知道打包的命令文件是config/build.js

到项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”即可，就在前面加个点就可以了，

现在再重新打包一次 npm run build，刷新你的页面，就可以看到啦，

其实原因就是：

在build文件夹下的utils.js代码中：

exports.assetsPath = function (_path) {
  var assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory
  return path.posix.join(assetsSubDirectory, _path)
}

 

看到这里啊，又出现个问题，assets和static这两个文件有啥区别呢？？？

第二个问题来了：assets和static这两个文件有啥区别呢？？？为啥删除static这个空文件报错呢

区别就是，static里的文件一般是js库，UI库，而assets里一般都是我们项目用的图片，字体等等，后者需要webpack重新打包编译，而前者直接拿来即用，为了证明我的判断，在发布生产的时候，static里的文件肯定是直接复制到dist下的，果然，代码中有验证：

给大家推荐个帖子：

https://segmentfault.com/q/1010000009842688

https://blog.csdn.net/wbiokr/article/details/73011288