这两天一直在忙活着搞自己的服务器,想着怎么把用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

 

 

Logo

前往低代码交流专区

更多推荐