本教程适用于vue-cli3.x版本搭建的vue项目,解决项目本地运行一切正常,但是打包后部署时页面白屏,控制台报错,静态资源找不到的问题。
网络异常,图片无法展示
|
首先简单说说vue-cli3.x版本的变化,从文件夹上来看,少了build、config文件夹,那如何像2.x一样配置呢?3.x可以在项目根目录创建一个vue.config.js,之前的配置都在这里面配置。
【官方】vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。
那么问题就很简单了,我们在项目根目录看下是否有vue.config.js,如果有,加一句代码。
就是在exoorts里面加上:
publicPath: './',
复制
没有的话,我们就新建一个vue.config.js文件,内容如下:
module.exports = { publicPath: './'}
复制
然后打包发布即可。
关于vue.config.js文件,配置该文件可以参考:
https://cli.vuejs.org/zh/config/#%E7%9B%AE%E6%A0%87%E6%B5%8F%E8%A7%88%E5%99%A8