vue打包放服务器显示代码,解决vue-cli3打包代码后,上线服务器后白屏问题

2023-10-27

前沿

因为最近vue刚刚发版了最新版本的vue-cli3,而最近刚刚好有个项目要迁移到vue,所以经过讨论,大家一起入坑VUE;然后我也刚好可以练手刚学一周的vue,结合TypeScript和vuex等全家桶的框架;后期

噗呲噗呲的大家在开发调试的时候,写得各种爽,各种调试都OK

问题来了

过了几天,产品大大跑过来问,你们开发这两天可以提测一部分了没有?可以的话就先上线一部分功能给QA测试先呗;看这几天写代码很爽就答应产品了

那就开始打包吧

执行打包命令: vue-cli-service build

成功后查看dist已经打包成功,然后自己启动本地一个node服务,查看打包出来页面是否有异常等;跑起来后,在网页上输入地址测试发现一片白屏

然后觉得会不会是我本地Node服务有问题?上线测试环境看看情况,哦豁,一样的白屏

然后各种代码检查,配置检查,感觉没有问题啊,这可咋办?

问题定位

跑到vue官网各种查找,也没发现有用信息呀

跑各种网站资料翻一翻,突然发现一个有类似问题,一看vue-router的mode配置可能会影像打包后的链接地址,然后看看我自己的router:

export default new Router({

mode: "history",

base: process.env.BASE_URL,

routes: [

{

path: "/home",

name: "home",

component: Home,

meta: {

keepAlive: true

},

children:[

]

},

.....

]

})

然后在查看vue-router对mode的说明:

mode

类型: string

默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)

可选值: "hash" | "history" | "abstract"

配置路由模式:

hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。

history: 依赖 HTML5 History API 和服务器配置。附上链接查看 HTML5 History 模式配置.

abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式。

解决办法

终于弄明白了,如果使用history模式上线,必须要服务端在服务器上有对应的模式才能使用history(看上面链接),如果服务器上没有配置,可以先使用默认的hash;

当然个人建议还是使用history模式,因为这样链接看起来要美观些

OK,作为一名合格的前端开发,遇到问题解决问题!对于vue开发我也是一个新手,欢迎大家互相学习!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue打包放服务器显示代码,解决vue-cli3打包代码后,上线服务器后白屏问题 的相关文章

  • linux如何运行ipynb文件_怎么在Jupyter里打开ipynb文件

    方法一 1 在使用Anaconda集成环境安装TensorFlow时 里面自带安装 Jupyter 安装完成后 打开开始菜单找到Anaconda3 64 bit 点击Anaconda Prompt 类似windows的命令行工具 2 在命令
  • QT怎么发送带结构体数据的信号?

    当发送的信号是结构体时 第一步 定义一个结构体 并在包含该结构体的类里面注册该结构体 通过此方法Q DECLARE METATYPE T 第二步 作为信号输出时 不能直接传结构体 要先包装一下结构再传出去 接收时 也要拆开包装 才能拿到数据
  • docker 镜像/容器的打包、导出、导入

    目录 一 将变动过的容器打包生成新的镜像 二 对镜像进行导出导入 1 将镜像导出为一个镜像img文件 2 将img镜像文件导入 复制出一个完全一样镜像 三 对容器进行导入导出 1 将容器导出为一个镜像tar文件 2 将镜像tar文件导入 生
  • vuejs项目纯js导出word、在线下载富文本内容或者网页另存为word文件

    所有前端导入导出方法集合 前端必备技能知识 JS导出Blob流文件为Excel表格 Vue js使用Blob的方式实现excel表格的下载 流文件下载 勤动手多动脑少说多做厚积薄发 CSDN博客 js文件流导出excel表格效果 重点 a
  • 【有奖调研】

    2022年 区块链价值被不断挖掘 成为Web3 元宇宙 数字藏品等众多产业的基石 我们面向广大开发者以及区块链爱好者发起本次调研 以了解大家对这项极具潜力的新技术的认知 为感谢大家的认真作答 我们将从有效问卷中随机抽取30名幸运者 赠送精品
  • 使用gsoap由.h文件生成wsdl相关问题

    生成wsdl文件步骤 头文件如下 ws interface h ifndef WS INTERFACE H define WS INTERFACE H 注意 以下注释是必要的 gsoap ns service name ws interfa
  • win7、win10进程pid4占用80端口的解决办法

    https jingyan baidu com article 7e4409533ffe092fc1e2ef10 html 今天想用wamp架设服务器 但是程序启动不起来 查看系统端口 80端口被占用 进程PID是4 我的系统是WIN10
  • 9-基于STM32无刷直流电机控制器的设计仿真与实现(原理图+源码+仿真工程+论文+PPT+参考英文文献)

    基于STM32无刷直流电机控制器的设计仿真与实现 原理图 源码 仿真工程 论文 PPT 参考英文文献 文章目录 基于STM32无刷直流电机控制器的设计仿真与实现 原理图 源码 仿真工程 论文 PPT 参考英文文献 资料 任务书 设计说明书
  • 【详解C语言指针】我真的让C指针给我唱征服了~乌拉

    文章目录 前言 一 字符指针 1 字符指针的定义 2 字符指针的作用 3 字符指针的特点 二 指针数组 1 指针数组的定义 2 指针数组的使用 三 数组指针 1 数组指针的定义 2 细说指针 2 1 指针类型 2 2 指针所指向的类型 2
  • Qt 多线程中的信号/槽

    Qt 多线程中的信号 槽 connect函数的五个参数表示的意义依次为 sender signal receiver slot connectionTpye 其中槽可以是receiver的成员函数 或者是任意可访问的静态函数 在多线程的情形
  • HTML2CANVAS使用总结

    前言 最近遇到了个功能 要把表单转化成图片来保存 这让我想到了一个插件HTML2CANVAS 这里给大家分享下它的用法和我使用的过程 html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏 这个html2canvas脚本
  • python logging默认情况下打印_Python中logging在多进程环境下打印日志

    因为涉及到进程间互斥与通信问题 因此默认情况下Python中的logging无法在多进程环境下打印日志 但是查询了官方文档可以发现 推荐了一种利用logging SocketHandler的方案来实现多进程日志打印 其原理很简单 概括一句话
  • 1.架构的开悟

    零 架构的感悟 1 架构是什么 2 架构师是什么 3 架构成长之路 3 1 翻越愚昧山峰 3 2 走上开悟之坡 3 3 踏上高原 1 架构是什么 软件架构 有关软件整体结构与组件的抽象描述 用于指导大型软件系统各个方面的设计 通常说架构是一
  • perp系列之一:关于perp

    perp系列之一 关于perp 版本说明 版本 作者 日期 备注 0 1 ZY 2019 5 29 初稿 目录 文章目录 perp系列之一 关于perp 版本说明 目录 欢迎 关于 好处 这是一个很好的进程管理框架 适用于Unix系统 之前
  • Failed to bind properties under ‘spring.datasource.password‘ to java.lang.String

    1 记录一次坑 在配置jasypt时 一些都很顺利 pom引入 项目启动 从网上搜索资料jar包启动手动设置秘钥 java jar Djasypt encryptor password 1234qwer test jar 但是在部署的时候
  • P2P技术简介

    P2P技术简介 NAT Network Address Translation 穿越 俗称打洞 技术 前言 p2p已经存在于我们生活的方方面面 我们通过下载在工具 比如迅雷 bitorent 各种网盘 下载 观看live视频 ppstrea
  • markdown转xmind思维导图 & markdown绘制思维导图

    markdown转xmind思维导图教程 直接看这篇博客 很实用的markdown转xmind思维导图教程 xmind思维导图转markdown 直接看这篇博客Xmind转markdown教程 Note 如果你的xmind8安装路径上有中文
  • 入门级题解138. 复制带随机指针的链表

    题目解读 复制链表 这个链表带随机指针 https leetcode cn com problems copy list with random pointer solution fu zhi dai sui ji zhi zhen de
  • windows下qt工程移植到linux

    把工程里面的目录Debug GeneratedFiles Release Win32 x64和文件 user sln vcxproj filters删掉 这里根据vs版本的不同删除的文件和目录也可能不同 只要保留 h cpp qrc 没有这

随机推荐

  • Linux网络服务:DNS域名解析服务

    目录 一 理论 1 DNS系统 2 查询类别 3 DNS服务器查询过程 4 hosts文件 5 主服务器配置文件 二 实验 1 主备DNS服务器 2台服务器都正常 2 主备DNS服务器 1台主服务器关闭 3 问题 一 理论 1 DNS系统
  • 基于multisim 实现的“出租车计价器的设计与仿真”

    1 设计要求 1 计费器具有行车里程计费 等候时间计费及起价等三部分 3位数码管显示最大金额为99 9 单位 元 2 行车里程单价 00元 等候时间单价 00元 5分钟 及起价 00元 均可以由键盘输入 此实验中行车里程单价和等候时间单价均
  • chatgpt赋能python:Python反向查找字符——一个强大的文本处理工具

    Python反向查找字符 一个强大的文本处理工具 在搜索引擎优化中 文本处理是非常关键的一环 其中 反向查找字符在文本处理中也扮演着一个重要的角色 能够帮助我们快速地定位和处理文本中的特定内容 在这篇文章中 我们将介绍反向查找字符在Pyth
  • Linux下which、whereis、locate、find 命令的区别

    http blog chinaunix net uid 20554039 id 3035417 html 我们经常在linux要查找某个文件 但不知道放在哪里了 可以使用下面的一些命令来搜索 这些是从网上找到的资料 因为有时很长时间不会用到
  • 管理科学基础知识__后悔值计算

    看一个例题 某企业要投产一种新产品 生产方案有四种 A 新建全自动生产线 B 新建半自动生产线 C 购置旧生产设备 D 外包加工生产 未来该产品的销售前景估计为很好 一般和较差三种 不同情况下该产品的收益值如下表所示 单位 万元 用后悔值
  • 【Python】解决AttributeError: ‘xml.etree.ElementTree.Element‘ object has no attribute ‘getchildren‘问题

    getchildren在python 3 9中已经被移除 如果项目中使用会显示错误 AttributeError xml etree ElementTree Element object has no attribute getchildr
  • python中strptime()和strftime()的区别和用法

    python中strptime 和strftime 的区别和用法 之前每次遇到时间格式转换都要去搜 今天决定自己记录一下这两个方法的区别和用法 也方便自己加深印象 1 strptime中的p代表parse 意为解析 也就是将一个字符串解析成
  • 【点宽专栏】国泰君安——综合期限多样性的趋势选股策略

    前言 此策略报告策略构建部分参考 国泰君安综合期限多样性的趋势选股策略数量化专题之九十 原报告思想 移动平均线由于具有简单直观的特征 是最常用的技术指标之一 除了简单发送多空信号之外 移动平均指标作为历史股价走势信息的载体 能够对未来收益起
  • Python Pandas 列数据筛选方法汇总

    Pandas 列数据筛选方法汇总 数据准备 一 筛选得到指定的列 1 1 根据 label 选择特定的几列 1 2 选择单列的两种方式 1 3 通过正则表达式选择列 二 同时对 行 和 列 进行筛选 2 1 通过切片 df loc 2 2
  • pytorch搭建squeezenet网络的整套工程,及其转tensorrt进行cuda加速

    本来 前辈们用caffe搭建了一个squeezenet的工程 用起来也还行 但考虑到caffe的停更后续转trt应用在工程上时可能会有版本的问题所以搭建了一个pytorch版本的 以下的环境搭建不再细说 主要就是pyorch 其余的需要什么
  • 【Java】Java中的多态

    文章目录 一 什么是多态 二 多态实现的条件 三 重写 3 1 什么是重写 3 2 重写和重载的区别 四 向上转型和向下转型 4 1 向上转型 4 2 向下转型 五 多态的优缺点 六 避免在构造方法中调用重写的方法 一 什么是多态 在Jav
  • MySQL多表关联查询

    文章目录 多表查询 用户表 用户角色表 角色表 权限表 角色权限表 表间关系 MySQL连接 关联查询用户表和用户角色表 关联查询用户表 用户角色表和角色表 多表连接 笛卡尔集 外连接
  • 软件测试报告可以包含哪些测试内容?

    软件测试报告可以包含以下测试内容 功能测试 测试软件的基本功能是否实现 是否符合要求 性能测试 测试软件的响应速度 并发能力 稳定性等性能指标 界面测试 测试软件的用户界面是否友好 易于使用 兼容性测试 测试软件在不同的操作系统 浏览器 设
  • Springboot中 @ConfigurationProperties对象 静态方法调用无效

    1 https blog csdn net weixin 43404791 article details 105430606 2 https blog csdn net qq827245563 article details 106296
  • 三行代码求二叉树的节点个数以及二叉树的深度

    二叉树的节点格式如下 struct BinaryTreeNode int m nValue BinaryTreeNode m pLeft BinaryTreeNode m pRight 1 求二叉树的节点个数 这道题比较简单 使用随便一种遍
  • TI DSP TMS320C66x学习笔记之VLIB测试数据(三)

    VLIB是TI提供的针对C6x优化过的视觉库 下载地址 http software dl ti com libs vlib latest index FDS html 提供40多个核心函数 主要实现以下功能 Background Model
  • SpringBoot+vue旅游项目总结

    Springboot vue旅游项目小总结 此项目为一个springboot vue入门级小项目 视频地址为 https www bilibili com video BV1Nt4y127Jh 业务简单 对提升业务能力没什么大的帮助 更多的
  • 开始→运行→输入的命令集锦

    gpedit msc 组策略 sndrec32 录音机 nslookup ip地址侦测器 explorer 打开资源管理器 logoff
  • 最后一位

    题目名称 最后一位 小明选择了一个正整数X 然后把它写在黑板上 然后每一天他会擦掉当前数字的最后一位 直到他擦掉所有数位 在整个过 程中 小明会把所有在黑板上出现过的数字记录下来 然后求出他们的总和sum 例如X 509 在黑板上出现过的数
  • vue打包放服务器显示代码,解决vue-cli3打包代码后,上线服务器后白屏问题

    前沿 因为最近vue刚刚发版了最新版本的vue cli3 而最近刚刚好有个项目要迁移到vue 所以经过讨论 大家一起入坑VUE 然后我也刚好可以练手刚学一周的vue 结合TypeScript和vuex等全家桶的框架 后期 噗呲噗呲的大家在开