vue项目打包后index.html文件打开空白
build打包vue项目遇到的问题,如下:
1、npm run build打包项目之后,生成的dist文件里面有被压缩后的static文件跟index.html,直接打开index.html页面是空白的,还会报几个错,找不到页面路径。
原因:找到config文件下index.js,会发现build下的 assetsPublicPath:' / ' 默认为根目录,而index.html和static是在同一级目录下,因此,解决方法就是 assetsPublicPath:' ./ ' 斜杠前加一个点,表示同一级。如图:
2、页面可以正常打开,如果vue-router跳转路由页面无法显示
解决方法:打开index.js看路由配置,mode:' hash ' 改这个配置即可,如图:
3、问题:
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
解释:
npm run dev是开发环境, npm run build是生产环境, 在开发环境完成代码和测试, 之后用生产环境生成代码,执行npm run build 命令后,会生成dist目录,里边包含index.html和static文件夹。
原文:https://blog.csdn.net/zx_p24/article/details/80360312
npm run build的时候, 一开始就会提示Built files are meant to be served over an HTTP server. Opening index.html over file:// won't work., 在vue-cli的默认配置中, 把assetsPublicPath: '/'改成assetsPublicPath: './',dist文件夹里的文件必须放在服务器的根目录, 如果你想本地打开的话, 可以在npm run build完成之后执行以下命令:
E:\test\vue_new>npm install -g http-serve
vue项目打包后index.html文件打开空白相关推荐
- 关于vue项目打包后提示图片文件路径错误的解决方法
vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片 ...
- vue项目打包后无法运行报错空白页面
控制台报错: 解决方式:修改文件 config/index.js 找到 assetsPublicPath build: {...//assetsPublicPath: '/',assetsPublic ...
- php项目index页面空白,如何解决vue项目打包后打开页面空白的问题
这篇文章主要介绍了vue项目打包后打开空白解决办法,内容挺不错的,现在分享给大家,也给大家做个参考. 网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通 ...
- 打包后index.html路径错误,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题 2018年05月23日 10:05:35 for_weber 阅读数:14179 Vue项目运行npm run buil ...
- 快速解决Vue项目打包后文件过大问题
快速解决Vue项目打包后文件过大问题 为什么打包后文件过大? 如何快速解决 一.路由懒加载[使用es6提案的import()方式] 二.CDN引入 为什么打包后文件过大? 移动app项目,使用vue- ...
- Vue项目打包后js文件压缩
前言 这段时间因为免费试用了https://free.aliyun.com/一台阿里云的服务器,配置是 2核4G 2M, 因为带宽太低了,每次在第一次加载的时候太慢了,通过F12调试,发现主要是因为加 ...
- Vue项目打包后不能正常显示页面
项目场景: 通过 Vue CLI 创建的 vue 项目,编写完项目后,通过 npm run bulid 对项目进行打包,再把打包得到的内容(dist文件夹)交给后端部署到服务器上. 问题描述: 对 v ...
- vue项目打包后修改接口地址
vue项目打包后修改接口地址 我们在做vue项目时,总会遇到开发时用的测试地址和项目上线时用到的接口地址不同,再就是项目上线后,后期需要更改接口地址的情况.然而,如果没有一个配置文件,后期更换起来就只 ...
- (javascript)vue项目打包后,写的覆盖element的样式无效了。这是什么原因?
问题: (javascript)vue项目打包后,写的覆盖element的样式无效了.这是什么原因?描述: 在开发模式模式下,写的覆盖样式都有效,打包后就无效,请问下是什么原因? main.js里的c ...
- vue项目打包后生成一个配置文件可以修改打包后的服务器api地址
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址 问题描述:vue项目打包上线之后,如果要改服务器api地址,只能在源码更改然后重新打包发布,为了解决这个问题,我们可以在static增 ...
最新文章
- java静态代理与动态代理
- python property装饰器原理,Python @property装饰器不起作用
- oracle体系结构-内存管理
- 《C语言及程序设计》实践项目——结构体应用
- 学生为什么要在CSDN写博客?
- UA MATH563 概率论的数学基础 中心极限定理15 Kolmogorov 0-1律
- 大数据分析:财务报表公开数据
- VScode的基础设置
- io-同步 异步 阻塞 非阻塞
- jQuery 1.9+ 移除$.browser方法
- 蓝桥杯 基础练习 特殊的数字
- 【转】C51中断函数的写法
- 程序员面试金典——9.4集合的子集
- 架构篇:高可用 Redis 服务架构分析与搭建
- 记一次服务器上架的总结和反思
- 脉搏测试报警系统设计
- dota2服务器位置设置在哪里,《DOTA2》自走棋国服怎么进入 自走棋国服服务器进入方法...
- 瑞幸退市,董事长被罢免,但是我并不同情他!
- 待支付取件费用是什么意思_待支付(待支付_订单待支付是什么意思_待支付取件费用)...
- 机器指令、操作类型、寻址方式