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

已于 2023-03-15 13:46:07 修改
阅读量709 收藏 1
点赞数
文章标签： vue.js 前端
于 2023-03-14 16:28:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ABU_ablm/article/details/129531777
版权

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

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

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

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

快速原型开发 | Vue CLI

ABU_媛
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue不是内部指令或外部指令，vue serve ##.vue无响应问题解决方案
zengcs_china的博客
08-29 926
安装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-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在一个请求里面调用另一个请求时不起作用.
u013682258的博客
05-26 926
例子: 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系列之----项目在ie浏览器中空白
hyduan_h5的博客
09-03 2965
具体现象 问题原因 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 1189
运行成功没有报错但是就是不显示内容 进浏览器看到控制台的报错信息：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 快速原型开发
weixin_30284355的博客
08-09 604
快速原型开发 注意: 是:serve 而不是 server 通过使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发，不过这需要先额外安装一个全局的扩展 go: npm install -g @vue/cli-service-global vue serve 缺点: 他需要安装全局依赖，在不同机器上的一致性不能得到保证。所以只适用于快速...
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开发，配置“no-unused-vars“: ‘off‘不生效的原因
u014783334的博客
05-22 1184
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/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用浏览器无法直接打开的问题
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项目页面空白的几个原因及解决办法
热门推荐
xin123____的博客
03-11 4万+
会出现vue项目页面空白，通常问题是在于路由上，可能是以下几种原因： 1.路由重复。 如果配置了两个路由是重复的，比如配置了两个【path: ‘/’】，那么访问就会看到空白页面，这时候改下重复的路由配置即可。 2.路由没有配置。 如果没有配置路由，那么访问的页面也可能是空白页，比如访问/yanggb，但是路由里却没有配置，这时候配置上丢失的路由配置即可。 3.路由配置指向页面为空白页。 这种情况就比较玄乎了，配置了指向的页面什么都没有，展示自然也是空白页。 总结 当然可能还会有别的原因导致vue项目出现空白
vue页面刷新空白解决办法
最新发布
09-19
如果Vue页面刷新后出现空白的情况，可能是因为Vue路由导致页面组件没有正确加载。解决这个问题的办法有以下几个方面： 1. 检查路由配置：查看Vue的路由配置文件，确保每个路由已正确定义并指定了对应的组件。确保路径和组件的映射关系正确。 2. 检查组件路径：如果使用了Vue的懒加载特性（使用`import()`动态加载组件），请确保组件的路径是正确的。检查文件路径是否拼写正确，是否位于正确的文件夹中。 3. 检查组件引入：确保在相关的Vue文件中正确引入了组件。可以检查`import`语句是否正确，组件是否有正确的命名，以及是否在`components`选项中注册了组件。 4. 检查数据加载：如果页面依赖于数据加载后才正常显示，可以检查数据请求是否成功。可以通过在Vue的生命周期钩子函数中打印数据来确认数据是否成功加载。 5. 检查错误提示：可以打开浏览器的开发者工具，在控制台查看是否有报错信息。如果有错误提示，可以根据报错信息来排查问题所在。 总之，针对Vue页面刷新后空白的问题，需要从路由配置、组件路径、组件引入、数据加载以及错误提示几个方面进行排查和调试，以找到并解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值