发现问题

vue项目完成打包出dist后准备打开index.html，发现居然页面是一片空白，f12一片报红。

分析问题

经过多次网上查询后发现这是由于vue打包时，脚手架会帮你配置好大量参数，但其中路径publicPath被配置为了"/",需要手动修改。

解决办法

1、将vue.config.js中的publicPath:"/“修改为publicPath:”./"

2、删除之前的dist重新打包。

结语

再次打包后打开dist中的index.html，发现页面出来了，但是如果页面有路由跳转的话，会发现跳转失败，
这时需要修改router中的路由模式为hash:
在router的index.js中修改：从vue-router中引入createWebHashHistory，将createWebHistory(process.env.BASE_URL)改为createWebHashHistory(process.env.BASE_URL)。

最后重新打包即可。

vue打包后dist的使用相关推荐

vue打包后dist目录直接打开index资源路径错误和css样式背景图路径问题
config/index.js build: {assetsPublicPath: './' } build/utils.js function generateLoaders (options) { ...
flask 渲染 vue 打包后的dist文件（直接用后端渲染）
flask 渲染 vue 打包后的dist文件(直接用后端渲染) vue项目打包出dist文件 npm run build 代码 from flask import Flask from flask ...
vue 打开html流_三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题...
index.html为什么打不开? Vue打包后生成的dist文件中的index.html,双击在浏览器中打开后发现一片空白,打开控制台有很多报错:"Failed to load resou ...
vue打包后css路径_Vue打包后访问静态资源路径问题
Vue打包后访问静态资源路径问题 Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们 ...
vue打包后出现一些map文件的解决方法
Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1.运行 cnpm run build 开始 ...
vue上线后图片不显示_解决Vue打包后访问图片/图标不显示的问题
大家可否遇到过 npm run build打包后,项目在线上运行时,资源文件 (图片.图标)不显示的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件打开此文件后 ...
Vue打包后反编译到源代码
Vue打包后反编译到源代码(reverse-sourcemap) 1.打开cmd,使用管理员打开 2.找到需要编译的js的目录下,这里以d://dist/static/js目录为例执行: cd d: ...
vue打包后更改js文件名称
好好学习 ,天天向上.Are you ready? vue默认打包dist文件(js文件默认名称) vue打包后更改js文件名称例如: 中间部分加时间戳代码奉上修改vue.config.js c ...
vue 打包后访问接口报错404 解决方案（前提是在vue里使用了代理）
vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) 参考文章: (1)vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) (2)https://www. ...

vue打包后dist的使用

发现问题

分析问题

解决办法

结语

vue打包后dist的使用相关推荐

最新文章

热门文章