npm init vite@latest
项目名字是abcde,选了vue-ts
cd abcde
npm install
npm run dev
浏览器访问,结果是空白的,这是怎么回事?

后来发现是浏览器版本的问题,低版本浏览器不支持js的高级语法。

方法一:换成高版本浏览器就没问题了。如下:


方法二:降低vite的版本。npm init vite@2.8.0就行。

这两种方法都可以解决vite,npm run dev白屏的问题。建议采用方法一,直接更新浏览器版本。

npm init vite@latest; 项目名字是abcde,选了vue-ts; cd abcde; npm install; npm run dev;浏览器访问,结果是空白的,这是怎么回事?的更多相关文章

  1. vue 项目npm run dev ip访问

    webpack npm run dev 不能通过ip访问 只能通过localhost访问 解决方法如下: 修改vue-cli: config/index.js 文件 把文件中 host 的值,改成 i ...

  2. VUE学习(一)——使用npm安装项目

    npm是node.js自带的功能 Node.js 安装配置 本章节我们将向大家介绍在 Windows 和 Linux 上安装 Node.js 的方法. 本安装教程以 Node.js v4.4.3 LT ...

  3. 什么,你还使用 webpack?别人都在用 vite 搭建项目了

    一.vite 到底是干嘛的? vite 实际上就是一个面向现代浏览器,基于 ES module 实现了一个更轻快的项目构建打包工具. vite 是法语中轻快的意思. vite 的特点: 1.轻快的冷服 ...

  4. 使用npm init快速创建web 应用

    一般来说我们会有npm init -y 快速生成package.json 文件, 但是npm init 可以使用脚手架工具,生成项目,比较方便 参考 npm init 帮助命令 npm init [- ...

  5. [NPM] Create a new project using the npm init <initializer> command

    Historically, the npm init command was solely use to create a new package.json file. However, as of ...

  6. 使用“npm init”初始化项目

    使用npm init初始化项目 为什么要使用npm init初始化项目 在node开发中使用npm init会生成一个pakeage.json文件,这个文件主要是用来记录这个项目的详细信息的,它会将我 ...

  7. 图文并茂quasar2.6+vue3+ts+vite创建项目并引入mockjs,mockjs 拦截ajax请求的原理是什么,quasar为什么要使用boot?

    每天都要开心(▽)哇: 首先呢,我们来创建项目 执行下面命令,开始创建项目啦 $ npm i -g @quasar/cli $ npm init quasar 下面是我的选项,仅供参考哇 √ What ...

  8. egg源码浅析一npm init egg --type=simple

    要egg文档最开始的时候,有这样的几条命令: 我们推荐直接使用脚手架,只需几条简单指令,即可快速生成项目: $ mkdir egg-example && cd egg-example ...

  9. vite的项目,使用 rollup 打包的方法

    官网资料 构建生产版本--库模式 https://cn.vitejs.dev/guide/build.html#library-mode 详细设置 https://cn.vitejs.dev/conf ...

  10. 小tips:你不知道的 npm init

    前言 在现代新建一个 JS 相关的项目往往都是从 package.json 文件开始的,不过这个文件里需要的字段实在是太多了,正常人都记不住,所以 npm 官方提供了 npm init 命令帮助我们快 ...

随机推荐

  1. windows中使用jenkins部署项目,后端无法启动问题

    忙活一下午+一上午,问题终于解决了.找了各种办法,最终解决方式如下: 1.jenkins打包成功,到接口会报502异常 原因:后端未成功启动 解决办法: 1.刚开始使用shell命令,无法查杀进程,后 ...

  2. appium 怎么就一直连接不上设备呢

  3. 使用Wireshark查看HTTPS中TLS握手过程

    通过使用Wireshark抓包分析TLS握手的过程,可以更容易理解和验证TLS协议,本文将先介绍Wireshark解密HTTPS流量的方法,然后分别验证TLS握手过程和TLS会话恢复的过程. 一.使用 ...

  4. 玩转SpringBoot原理:掌握核心技术,成为高级开发者

    本文通过编写一个自定义starter来学习springboot的底层原理,帮助我们更好的使用springboot集成第三方插件 步骤一:创建项目 步骤二:添加依赖 步骤三:创建自动配置类 步骤四:创建 ...

  5. 9.SSRF和XML

    SSRF和XML 目录 SSRF和XML SSRF介绍 SSRF漏洞挖掘 SSRF漏洞利用 内网探测: 常见端口探测: 协议探测: file协议敏感文件: XML介绍 DTD定义 DTD作用 XXE介 ...

  6. 系统评价——主成分分析PCA的R语言实现(六)

    主成分分析(Principal Component Analysis,PCA),是将多个变量通过线性变换以选出较少个数重要变量的一种多元统计分析方法,起到数据约减和集成的作用.在许多领域的研究与应用中 ...

  7. 【Note】贪心

    感谢 $ \text{orzws/chy} $ 倾情授课. 目录 -1. 证明方式 0. 朴素贪心 AT2557 [ARC073C] Ball Coloring P2587 [ZJOI2008]泡泡堂 ...

  8. OpenTiny 跨端、跨框架组件库升级TypeScript,10万行代码重获新生

    摘要:一份精心准备的<JS项目改造TS指南>文档供大家参考,顺便介绍TS 基础知识和 TS 在 Vue 中的实践. 本文分享自华为云社区<历史性的时刻!OpenTiny 跨端.跨框架 ...

  9. React+Antd在使用form表单提交DatePicker日期框的时候会出现少八小时的情况

    在使用antd做form表单提交的时候,突然发现了一个很有意思的bug.就是在使用datepicker组件日期框的时候会出现提交后少一天的问题 我在网上搜索了许多解决办法,也是困扰了我一天的时间,下面 ...

  10. Yii2批量插入数据

    方法一 yii2一次插入多行数据  /** * @inheritdoc 批量添加 * @params $add array 添加数据 */ public function add_all($add) ...