vue cli 打包发布 白屏 问题 页面空白 问题解决办法 非常简单 亲测可用

时间:2024-04-07 11:45:54

问题比较简单,老鸟略过

问题现象

最近在学习vue ,使用脚手架工具 vue-cli创建工程后目录如下:
vue cli 打包发布 白屏 问题 页面空白 问题解决办法 非常简单 亲测可用

打包发布到生产环境的时候,按照官方文档说法,
cd 到工程目录
npm run build
然后生成的dist目录就是用来发布的文件
按照这个说法确实不报错
vue cli 打包发布 白屏 问题 页面空白 问题解决办法 非常简单 亲测可用
发布到tomcat webapp目录下之后,用浏览器打开白屏

并且 看到引用的 js文件找不到
vue cli 打包发布 白屏 问题 页面空白 问题解决办法 非常简单 亲测可用## 解决办法
查看官方文档
发现有这么一句话
vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。

然后结合网上的说法,应该是要新建一个 vue.config.js 文件
然后内容如下:
module.exports = {
// 公共路径(必须有的)
publicPath: “./”,
}

保存后关闭
然后删除dist目录重新打包
重新放到tomcat下,用浏览器访问
成功
vue cli 打包发布 白屏 问题 页面空白 问题解决办法 非常简单 亲测可用