最近在build打包vue项目遇到了几个问题，如下：
1、npm run build打包项目之后，我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器，但最近发现直接打开index.html页面是空白的，还会报几个错，找不到页面路径。
原因：找到config文件下index.js，全局搜索assetsPublicPath，结果是 assetsPublicPath：' / ' 默认为根目录，而index.html和static是在同一级目录下，因此，解决方法就是 assetsPublicPath：' ./ ' 斜杠前加一个点，表示同一级。如图：
如果还搞不懂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 ' 改这个配置即可，如图：
vue项目build打包后图片路径不对导致图片空白不显示问题解决方法
1.在上篇文章src配置及引入的基础上修改项目配置: 文章链接地址:. 2.具体配置过程如图: ...
vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...
Vue+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.0 打包之后 打开index.html出现空白页
如何解决vue2.0 打包之后 打开index.html出现空白页 1.打包之前修改三个文件 1.1.第一步,找到build文件,在webpack.prod.conf.js 第25行左右 ...
关于npm run build打包后css样式中的图片失效的问题(如background)
平时run dev都能正常显示的css背景图片在npm run build打包后竟然不显示了(写在标签对中的图片都可以正常显示),而且dist/static/img目录下是确实有这张图片的,于是查看打 ...
Xcode: Run Script 的运用, 使build打包后自动+1
背景: 每次打包都要build+1处理,比较麻烦,使用 Run Script 的运用使build打包后自动+1 0. 使用xcode 添加run Script 然后就可以添加Run Script了 1 ...
Nodejs：npm run build之后，dist\index.html页面在火狐中可以正常显示登录页面并登录成功，在Chrome中可以正常显示登录页面，登录失败
问题描述:Nodejs:npm run build之后,dist\index.html页面在火狐中可以正常显示登录页面并登录成功,在Chrome中可以正常显示登录页面,登录失败 解决方法:将打包后的d ...
