vue中打包之后访问index.html,Vue通过build打包后打开index.html页面是空白的

迈不过友情╰ 2022-10-07 13:47 673阅读 0赞

最近在build打包vue项目遇到了几个问题，如下：

1、npm run build打包项目之后，我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器，但最近发现直接打开index.html页面是空白的，还会报几个错，找不到页面路径。

原因：找到config文件下index.js，全局搜索assetsPublicPath，结果是 assetsPublicPath：' / ' 默认为根目录，而index.html和static是在同一级目录下，因此，解决方法就是 assetsPublicPath：' ./ ' 斜杠前加一个点，表示同一级。如图：

![9580333f12248ff278766693fa6461c2.png][]

如果还搞不懂assetsPublicPath，看下面解释：

assetsPublicPath

这个静态资源的引用前缀, 默认的是/

按照上面的配置,

当你把 dist 文件夹下的文件放到服务器,

能用http://www.xxx.com/static/js/xxx.js路径访问到时, 那么assetsPublicPath就不需要修改了

需要用http://www.xxx.com/aaa/bbb/static/js/xxx.js路径访问到时, 那么assetsPublicPath就得改成/aaa/bbb/, 然后重新 build 一次, 上传到服务器

当你把静态文件传到 cdn, 需要用http://stacic.yyy.com/aaa/bbb/static/js/xxx.js路径访问到时, 那么assetsPublicPath就得改成http://stacic.yyy.com/aaa/bbb/, 然后重新 build 一次, 上传到服务器

用绝对路径听起来好像很复杂啊, 能不能用相对路径呢?

当然也是可以的, 不过配置起来要比用绝对路径复杂的多, 主要是涉及到 css 文件的里图片和字体等

首先, assetsSubDirectory要设置成空

将assetsPublicPath, 改成./

2、页面可以正常打开了，但是vue-router跳转路由页面无法显示，其实，这个也很简单。

解决方法：打开index.js看路由配置，mode:' hash ' 改这个配置即可，如图：

![5ce5678c5ea9b7a10dbaa52abdbdad76.png][]

vue项目build打包后图片路径不对导致图片空白不显示问题解决方法

1.在上篇文章src配置及引入的基础上修改项目配置: 文章链接地址:https://www.cnblogs.com/hsl-shiliang/p/10333022.html. 2.具体配置过程如图: ...

vue build打包后css里的图片路径404不正确的问题

vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...

Vue&plus;elementUI build打包部署后字体图标丢失问题

错误描述:Vue+elementUI  build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...

npm run build 打包后，如何运行在本地查看效果(Nginx服务)

这段时间,研究了一下vue 打包的很慢的问题.但是当我 npm run build 打包后,在本地查看效果的时候,活生生被我老大鄙视了,因为我打开了XAMPP.他说:你怎么不用Nginx啊?用这个一堆 ...

vue 使用webpack打包后路径报错以及 alias 的使用

一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...

如何解决vue2&period;0 打包之后 打开index&period;html出现空白页

如何解决vue2.0 打包之后 打开index.html出现空白页 1.打包之前修改三个文件       1.1.第一步,找到build文件,在webpack.prod.conf.js 第25行左右 ...

关于npm run build打包后css样式中的图片失效的问题&lpar;如background&rpar;

平时run dev都能正常显示的css背景图片在npm run build打包后竟然不显示了(写在标签对中的图片都可以正常显示),而且dist/static/img目录下是确实有这张图片的,于是查看打 ...

Xcode&colon; Run Script 的运用&comma; 使build打包后自动&plus;1

背景: 每次打包都要build+1处理,比较麻烦,使用 Run Script 的运用使build打包后自动+1 0. 使用xcode 添加run Script 然后就可以添加Run Script了 1 ...

Nodejs：npm run build之后，dist&bsol;index&period;html页面在火狐中可以正常显示登录页面并登录成功，在Chrome中可以正常显示登录页面，登录失败

问题描述:Nodejs:npm run build之后,dist\\index.html页面在火狐中可以正常显示登录页面并登录成功,在Chrome中可以正常显示登录页面,登录失败 解决方法:将打包后的d ...

随机推荐

getPos&comma;offsetTop

关于SQL Server 2008添加用户映射问题 解决办法

同事一直需要用触发器 但是之前的数据库没有dbo映射 无法添加 查阅了很多资料 不适合自己的问题 所以自己动手丰衣足食 特留下笔记 希望能给遇到相同问题的朋友一个解决的思路

MyEclipse 代码自动提示

默认 myeclipse,输入.才会出现代码提示,不能根据单词前缀提示. 按以下设置就很爽了 .abcdefghijklmnopqrstuvwxyz(,

SkipFish

https://zmap.io/ http://code.google.com/p/skipfish/wiki/SkipfishDoc\#How\_to\_run\_the\_scanner?

MySQ安装

1.去官网下载安装包 .http://www.mysql.com/downloads/ 2.安装过程中会出现下面的提示:记得保存你的MySQL的初始的默认密码.如果没有注意,那么恢复起来有点麻烦,后续 ...

CSS样式之表格，表单

布局样式 .container:固定宽度并具响应式 .container-fluid自由宽度(100%宽度) 标题样式

# 到 #

###### 样式已经写好了,可以直接用,兼容性也 ... ######

基于QT的异质链表实例

所谓的异质链表就是的节点元素类型能够不同.本实例採用C++抽象类和多态实现. \#include \#include \#in ...

HDU 2438 Turn the corner&lpar;三分查找&rpar;

托一个学弟的福,学了一下他的最简便三分写法,然后找了一道三分的题验证了下,AC了一题,写法确实方便,还是我太弱了,漫漫AC路!各路大神,以后你们有啥好的简便写法可以在博客下方留个言或私信我,谢谢了! ...

mysql下载和安装

官网下载地址:https://dev.mysql.com/downloads/mysql/ 安装: 1.将下载文件解压到指定文件目录 2.再mysql目录下新建my.ini文件 \[mysqld\] \# ...

[9580333f12248ff278766693fa6461c2.png]: /images/20221005/1463574ef26f4851ab0fd67d45c51b8d.png
[5ce5678c5ea9b7a10dbaa52abdbdad76.png]: /images/20221005/c2f3dde6e360473c870ee4bf53af3575.png