vue-cli4,vue3打包后页面无内容
这个问题百度了一下,各种各样的的回答都有,试了好多种方法,终于解决这个问题
解决方法:
1.在项目根目录下,新建 vue.config.js, 在文件中输入:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? './'
: '/'
}
2.修改路由配置,router/index.js
默认使用的 createWebHistory,就是因为使用的 createWebHistory,所以不显示内容,我们需要改成 createWebHashHistory
// 1.需要引入
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router' // 2.修改配置
const router = createRouter({
history: createWebHashHistory(process.env.BASE_URL),
routes
})
3.重新打包,然后就正常了
vue-cli4,vue3打包后页面无内容的更多相关文章
- vue 使用webpack打包后路径报错以及 alias 的使用
一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...
- vue+webpack项目打包后背景图片加载不出来问题解决
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...
- vue+elementui项目打包后样式变化问题
博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎,找到了问题所在以及解决办法:main.js中的引入顺序决定 ...
- 将vue的项目打包后通过百度的BAE发布到网上的流程
经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. ...
- vue通过webpack打包后怎么运行
1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...
- Struts2添加了<s:debug>后页面无效果的解决方案
一.环境 Struts2版本 struts2.5 二.问题 在jsp页面中添加了<s:debug>后页面上无任何展示. 三.解决 在struts.xml中的struts节点下添加如下常量即 ...
- vue项目 webpack打包后,图片路径是绝对路径
vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...
- 配置vue项目将打包后图片文件的引用路径改为cdn路径?
vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...
- vue项目webpack打包后修改配置文件
从webpack打包结构中我们知道,vue中有一个存放外部资源的文件夹static,它里面的文件是不会被打包编译的,所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js ...
- Vue通过build打包后 打开index.html页面是空白的
最近在build打包vue项目遇到了几个问题,如下: 1.npm run build打包项目之后,我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器,但最近发现直 ...
随机推荐
- SpringMvc-<context:component-scan>使用说明
在xml配置了这个标签后,spring可以自动去扫描base-package下面或者子包下面的java文件,如果扫描到有@Component @Controller@Service等这些注解的类,则把 ...
- 【Azure 应用服务】Azure Durable Function(持久函数)在执行Activity Function时候,因为调用函数名称错误而导致长时间无响应问题
问题描述 在使用Azure Durable Function函数,调用函数链模式来调用多个Activity Function. 函数链:https://docs.azure.cn/zh-cn/azur ...
- 基于 BDD 理论的 Nebula 集成测试框架重构(下篇)
本文首发于 Nebula Graph 公众号 NebulaGraphCommunity,Follow 看大厂图数据库技术实践. 在上篇文章中,我们介绍了 Nebula Graph 的集成测试的演进过程 ...
- Java 线程通信的应用:经典例题:生产者/消费者问题
1 package bytezero.threadcommunication; 2 3 /** 4 * 线程通信的应用:经典例题:生产者/消费者问题 5 * 6 * 7 * 8 * @author B ...
- Java 多线程------解决 实现Runnabel接口方式线程的线程安全问题 方式二:同步方法 +总结
方式二:同步方法* 如果操作共享数据的代码完整的声明在一个方法中,我们不妨将此方法声明同步的 1 package bytezero.threadsynchronization; 2 3 4 5 /** ...
- 搭建一个Java项目可直接拿去使用的通用工具类
1.通用枚举类 import lombok.Getter; /** * @Description 状态码定义约束,共6位数,前三位代表服务,后3位代表接口 * 比如 商品服务210,购物车是220.用 ...
- MYSQL索引-下
前言 丁奇老师的 MYSQL45讲 的关于索引的的两节 深入浅出索引,做个笔记 覆盖索引 插入一个实例表 mysql> create table T ( ID int primary key, ...
- court 法院 单词记忆
court 围绕得到 - 法院 讨好 c 表示得到 catch助记 ourt = turn = around = 围绕 围绕得到某一事物的地方或者行为 英[kɔːt],美[kɔrt] n. 法院, 法 ...
- python处理txt文件常用方法总结
一 打开txt的正确方式 一般人会用到怎么快速打开txt,下面分享两种方式: f = open("data.txt","r") #设置文件对象 f.close( ...
- Java使用Steam流对数组进行排序
原文地址:Java使用Steam流对数组进行排序 - Stars-One的杂货小窝 简单记下笔记,不是啥难的东西 sorted()方法里传了一个比较器的接口 File file = new File( ...