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

已于 2023-03-15 13:46:07 修改
阅读量701 收藏 1
点赞数
文章标签： vue.js 前端
于 2023-03-14 16:28:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ABU_ablm/article/details/129531777
版权
文章指出，当遇到VueCLI项目运行正常但显示空白无效果的情况时，可能是由于使用了较高版本的Node（如16.17.1）。解决方案是将Node版本降低至与vue-cli（4.5.8版本）兼容的12.22.12，以此恢复项目的正常运行。
摘要由CSDN通过智能技术生成

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

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

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

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

快速原型开发 | Vue CLI

ABU_媛
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
运行 `vue serve`报错
shuureina的博客
08-07 6714
在项目打开的终端下运行 vue serve报错 1.你的报错的这两句话直译过来就是 “vue serve命令需要全局安装，请使用yarn global add @vue/cli-service-global” 如果以上的命令执行后还是不行，请检查 ： 1.检查npm, node版本。 给node命令执行的cmd终端“超级管理员权限”。 用命令切换为超级管理员用户 以管理员身份运行cmd，进入的...
vue-elem-app:基于vue2.3.x构建的elements外卖APP
05-28
vue-elem-app 使用vue2.3.x构建的elements外卖APP，基于: 在原基础上做出的改变： 运用了vue 2.3.x版本后添加的.sync语法糖 为商品选项卡中的滚动区添加了顶部固定效果,左侧菜单区也能根据用户在内容区的选择滚动...
[Vue]Vue-Cli 用run serve启动项目后一片空白的问题，终端及浏览器均无报错！
iChangebaobao的博客
08-24 7966
前言 今天粗略地又看了一遍 Vue-Router官网，本来想查漏补缺，没想到啊，导致项目运行出问题了。 问题 cnpm run serve后，终端及浏览器均无报错，找了半天原因，最终发现是路由router.js那里自己手贱粘贴了一段代码，多加了一个路由的独享守卫，如果不做处理的话，路由会一直没反应，自然就进入了beforeEnter函数这里，相当于被拦截，所以渲染不出对应的组件，啥也不是，散会！ 解决 把这里注释掉就正常了，遇到Bug不要慌 beforeEnter: (to, from, next) =&
关于vue/cli3打包空白页问题解决
qq_32754575的博客
10-02 7978
前提 在vue-cli2中也出现过打包后本地打开index.html空白页问题，解决办法：修改config文件夹中ndex.js文件中assetsPublicPath属性为assetsPublicPath: ‘./’，路由用hash模式 环境 vue-cli3 package.json文件如下： { "name": "my-temp", "version": "0.1.0", ...
解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页的问题
青春木鱼的博客
07-14 1万+
三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
解决＜RouterView＞在App.vue中不显示的问题
m0_63003627的博客
07-16 1624
3.检查main.js中是否正确引入router（我就是因为这个弄了半天T T)1.首先检查最容易拼错的routes。2.检查引入路径是否正确。
Exchange-App：使用Vue.js和Vue路由器构建的SPA
02-20
应用程序可利用Vue.js的优势为您实时可视化所有加密货币及其值 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 应用已部署 您还可以在...
vuejs-sample-vote-app:使用Vue.js制作的示例投票应用程序
05-15
vuejs-sample-vote-app 投票应用程序的样本Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run ...
vue-todo-app:在Vue.js中构建Todo应用
04-16
vue-todo-app 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
renren-fast-vue前端代码.zip
06-04
3. `App.vue`：应用的根组件，其他组件可以通过路由嵌套在其中。 4. `components`目录：包含可复用的UI组件。 5. `router`目录：定义应用的路由配置，用于页面跳转。 6. `store`目录（如果使用Vuex）：管理应用的...
Vue遇到的问题及解决
菜鸟零号 kungfu~peng
03-12 1546
Vue遇到的问题及解决问题所属文件问题描述解决vue_demo1.html运算表达式书写的时候没有注意左右的间隙表达式规范书写，留有空隙vue_demo2.html声明vue对象时，用Vue不起作用创建Vue时，用Vue关键字出错，改用const或varvue_demo3.htmljavascript中写html标签看起来比较诡异写就ok，需要注意的是Vue.js2.0中废除replace函数（是...
Vue项目serve报错问题
weixin_53483235的博客
08-04 299
Vue运行终端重用问题
vue系列之----项目在ie浏览器中空白
hyduan_h5的博客
09-03 2960
具体现象 问题原因 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项目页面空白的几个原因及解决办法
热门推荐
xin123____的博客
03-11 4万+
会出现vue项目页面空白，通常问题是在于路由上，可能是以下几种原因： 1.路由重复。 如果配置了两个路由是重复的，比如配置了两个【path: ‘/’】，那么访问就会看到空白页面，这时候改下重复的路由配置即可。 2.路由没有配置。 如果没有配置路由，那么访问的页面也可能是空白页，比如访问/yanggb，但是路由里却没有配置，这时候配置上丢失的路由配置即可。 3.路由配置指向页面为空白页。 这种情况就比较玄乎了，配置了指向的页面什么都没有，展示自然也是空白页。 总结 当然可能还会有别的原因导致vue项目出现空白
vue项目页面空白但不报错产生的原因分析
Clover ‘s Blog
03-16 9127
vue项目页面空白但不报错产生的原因分析
VUE项目运行失败原因以及解决办法
Smile1552911411的博客
04-04 1万+
ENOENT: no such file or directory, open 'D:\code\human_resource_management 3\package.json'
vue-cli-service serve --open启动项目时打开浏览器失效无法打开浏览器解决方法
山前山后各有哀愁 有风无风都不自由
03-24 2482
vue-cli 运行vue项目，设置 vue-cli-service serve --open 自动打开浏览器失效，npm run serve无法启动浏览器
vue项目线上环境报错 Uncaught SyntaxError: Unexpected token '<' ---app.js
最新发布
01-18
5. 清除缓存：如果以上方法都没有解决问题，可以尝试清除浏览器缓存，然后重新加载页面。 以下是一个示例代码，展示了如何使用Vue CLI打包一个Vue项目并解决可能出现的语法错误： ```shell # 安装Vue CLI npm ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值