解决vue cli3.x打包上线静态资源找不到路径问题

简介: 解决vue cli3.x打包上线静态资源找不到路径问题

本教程适用于vue-cli3.x版本搭建的vue项目,解决项目本地运行一切正常,但是打包后部署时页面白屏,控制台报错,静态资源找不到的问题。

网络异常,图片无法展示
|

首先简单说说vue-cli3.x版本的变化,从文件夹上来看,少了build、config文件夹,那如何像2.x一样配置呢?3.x可以在项目根目录创建一个vue.config.js,之前的配置都在这里面配置。

image.png

【官方】vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。

那么问题就很简单了,我们在项目根目录看下是否有vue.config.js,如果有,加一句代码。

image.png

就是在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


相关文章
|
2天前
|
JavaScript
vue消息订阅与发布
vue消息订阅与发布
|
1天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
10 4
|
1天前
|
JavaScript
vue尚品汇商城项目-day07【51.路由懒加载】
vue尚品汇商城项目-day07【51.路由懒加载】
11 4
|
2天前
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
1天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
7 2
|
JavaScript
Vue:静态资源的路径问题
Vue:静态资源的路径问题
175 0
|
4天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
3天前
|
JavaScript 前端开发 IDE
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
|
3天前
|
JavaScript 前端开发 API
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
|
2天前
|
JavaScript 前端开发 API
Vue学习笔记7:使用v-for指令渲染列表
Vue学习笔记7:使用v-for指令渲染列表