踩坑 - 执行 vue serve app.vue 没有效果、浏览器空白！

原创 已于 2023-03-15 13:46:07 修改 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端

于 2023-03-14 16:28:13 首次发布
文章指出，当遇到VueCLI项目运行正常但显示空白无效果的情况时，可能是由于使用了较高版本的Node（如16.17.1）。解决方案是将Node版本降低至与vue-cli（4.5.8版本）兼容的12.22.12，以此恢复项目的正常运行。

症状：没有报错、运行流畅、可以打开浏览器、没效果、空白

诊断：node 版本问题，用了16.17.1版本

治疗：因为vue-cli用的是4.5.8版本，所以node 版本改为 12.22.12 即可

附上链接vue serve安装使用链接：

快速原型开发 | Vue CLI

ABU_媛
关注
[RuoYi-Vue-Plus]＜000＞ RuoYi-Vue-Plus 5.X 本地环境搭建,基于Windows
mizuhokaga的博客
02-29 1万+
本系列使用的环境版本:日志提前安装
【Vue】高级系列（二）配置Vue脚手架-npm方法-vscode配置-vue.config.js-项目打包与发布-ESlint使用
YK菌的博客
01-30 2898
学习使用vue-cli Vue官方提供的脚手架工具
解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页的问题
热门推荐
青春木鱼的博客
07-14 2万+
三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
解决＜RouterView＞在App.vue中不显示的问题
m0_63003627的博客
07-16 2580
3.检查main.js中是否正确引入router（我就是因为这个弄了半天T T)1.首先检查最容易拼错的routes。2.检查引入路径是否正确。
[Vue]Vue-Cli 用run serve启动项目后一片空白的问题，终端及浏览器均无报错！
iChangebaobao的博客
08-24 8313
前言 今天粗略地又看了一遍 Vue-Router官网，本来想查漏补缺，没想到啊，导致项目运行出问题了。 问题 cnpm run serve后，终端及浏览器均无报错，找了半天原因，最终发现是路由router.js那里自己手贱粘贴了一段代码，多加了一个路由的独享守卫，如果不做处理的话，路由会一直没反应，自然就进入了beforeEnter函数这里，相当于被拦截，所以渲染不出对应的组件，啥也不是，散会！ 解决 把这里注释掉就正常了，遇到Bug不要慌 beforeEnter: (to, from, next) =&
vue单组件测试执行安装命令npm install -g @vue/cli-service-global中遇到的问题
facial_123的博客
08-23 5007
npm install -g @vue/cli-service-global安装与使用时遇到的问题 Syntax Error: TypeError: this.getOptions is not a function 错误的解决方法 Invalid options in vue.config.js: child "transpileDependencies" fails because ["transpileDependencies" must be an array]的解决方法
project-xczx2-portal-vue-ts.zip
06-04
标题 "project-xczx2-portal-vue-ts.zip" 暗示这是一个使用 Vue.js 框架，并结合 TypeScript 开发的项目。Vue.js 是一个轻量级的前端JavaScript框架，以其灵活性、易用性和高性能著称。TypeScript是JavaScript的一个...
2019-06-21-vue-my-app.zip
06-24
通过Vue CLI创建的项目，你可以直接运行`npm run serve`来启动一个热更新的本地开发服务器。这将自动编译和打包源代码，并在浏览器中预览你的应用。Vue CLI还提供了`build`命令用于生产环境的打包，以及`lint`命令...
vue-cars-app:v在vue.js上使用AUTO的简单应用程序。
05-06
Vue.js汽车应用是一款基于Vue.js框架构建的轻量级应用程序，专为展示汽车信息而设计。Vue.js是一个流行的前端JavaScript框架，它简化了构建交互式用户界面的过程，提供了组件化开发、虚拟DOM、响应式数据绑定等特性...
vue在一个请求里面调用另一个请求时不起作用.
u013682258的博客
05-26 1022
例子: submit() { //从缓存中拿出数据 let uid = UserCenter.getUser().data.data.uid this.$refs.rulesForm.validate(val => { if (val) { HttpClient.doPost( service + "/admin/auth/forceUpdatePassword", { userId: uid, username:UserCenter.getUser().data.data.use
vue不是内部指令或外部指令，vue serve ##.vue无响应问题解决方案
zengcs_china的博客
08-29 1068
安装nodejs步骤 1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/ 下载完成后，双击“node-v6.9.2-x64.msi”，开始安装Node.js 2、选安装目录进行安装 到此已安装完毕。 3、测试 在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口，能显示版本号表明安装成功。 vue不是内部指令或外部指令 1.如上安装完nodejs后，通过cmd窗口输入 npm install -g @.
关于Vue的 在CMD中输入：vue ui 进入vue ui界面显示空白的问题
qq_42061817的博客
09-30 2138
昨天新建了一个vue项目，打开vue ui界面运行serve测试时发现app页面是空白，serve中有一个警告，没截图，之后网上搜解决方法看到了这个 vue ui报错Couldn‘t parse bundle asset “C:\Users\Administrator\vue_project1\dist\js\about.js“. Analyzer 之后就直接删了项目文件夹打算重建项目，然后输出vue ui发现进去之后页面时空白 console报错 试了卸载vue cli十几次，然而并没有什么用 在网上也查
vue系列之----项目在ie浏览器中空白
hyduan_h5的博客
09-03 3223
具体现象 问题原因 IE9-IE11 不兼容ES6语法，promise语法 问题解决 方法一 下载安装包babel-polyfill npm i babel-polyfill 在main.js中引入babel-polyfill import babelPolyfill from 'babel-polyfill ' Vue.use(babelPolyfill) 修改webpack.base.conf.js entry: { app: ["babel-polyfill",
vue运行后没有显示内容
m0_54256047的博客
10-22 1341
运行成功没有报错但是就是不显示内容 进浏览器看到控制台的报错信息：vue.runtime.esm.js?c320:4573 [Vue warn]: Property or method "yzmStr" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based comp
Vue项目serve报错问题
weixin_53483235的博客
08-04 459
Vue运行终端重用问题
Vue 快速原型开发
weixin_30284355的博客
08-09 692
快速原型开发 注意: 是:serve 而不是 server 通过使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发，不过这需要先额外安装一个全局的扩展 go: npm install -g @vue/cli-service-global vue serve 缺点: 他需要安装全局依赖，在不同机器上的一致性不能得到保证。所以只适用于快速...
VUE开发，配置“no-unused-vars“: ‘off‘不生效的原因
u014783334的博客
05-22 1388
no-unused-vars 规则作用于 js 代码 "no-unused-vars":"off", vue/no-unused-vars 作用于 vue 模板 'vue/no-unused-vars': "off" 官方解释https://github.com/vuejs/vue-cli/issues/2499
使用 vue cli 的 vue serve命令单独运行.vue文件报错： Error: Cannot find module ‘@vue/compiler-sfc/package.json‘
qq_45327886的博客
08-27 1万+
Error: Cannot find module '@vue/compiler-sfc/package.json' 单独运行.vue文件
ERROR Failed to compile with 2 errors 22:19:21 These dependencies were not found: * @element-plus/icons-vue in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/login.vue?vue&type=script&setup=true&lang=js * element-plus in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/login.vue?vue&type=script&setup=true&lang=js To install them, you can run: npm install --save @element-plus/icons-vue element-plus
最新发布
07-09
我们正在解决Vue项目编译时因缺少依赖`@element-plus/icons-vue`和`element-plus`导致的错误。错误信息通常类似于： ``` ERROR Failed to compile with 1 error This dependency was not found: * element-plus in ....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值