Vue前端项目修改不生效

已于 2024-08-06 11:33:54 修改
阅读量802 收藏
点赞数 3
CC 4.0 BY-SA版权
分类专栏： JavaWeb疑难解析 文章标签： vue.js 前端 javascript
于 2024-08-06 11:33:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43731884/article/details/140951355

Vue前端项目修改不生效问题

昨天项目部署时遇到了这个问题，后端服务器路径修改后依旧发送至localhost，重启、清缓存、重新克隆项目全部试过了没有效果

image-20240806111824735

但是后端接口从浏览器访问没有问题。405证明后端服务器是有反应的，但是从前端vue访问时后端没有任何反应

百度了N久没有找到解决方案，无意中看到了PS

image-20240806112355870

1722915155796)]

解决办法就是使用cmd窗口跑一次，然后就正常了，这个问题也消失了

Vue 修改启动路径不生效怎么解决
2301_79326254的博客
10-01 833
在Vue项目中，有时候我们需要修改项目的启动路径，但是发现修改后并没有生效。该路径指定了项目在服务器上的基础路径，它可以是相对路径或绝对路径。当你重新构建项目后，你需要将生成的静态文件部署到服务器上。，你需要重新构建项目，使修改生效。通过按照上述步骤进行操作，你应该能够成功地修改Vue项目的启动路径。这个命令将会重新构建项目，并生成一个可以部署到服务器上的静态文件。请确保你修改了正确的文件，而不是其他的配置文件。，那么你需要将生成的静态文件部署到服务器上的。你可以根据你的项目需求来修改这个路径。
Nginx 部署前端 Vue 项目实战指南
miracle的专栏
09-02 2661
在执行此命令之前，需要确保路由配置中的模式正确。修改完成后，保存配置文件，并在命令行中执行相应命令重启 Nginx 服务。您可以从 Nginx 官方网站下载安装包，然后按照安装向导进行安装。，回车，即可启动 Nginx 服务。可以在任务管理器的进程中看到启动的 Nginx 服务。从 Nginx 官方网站下载安装包，按照安装向导进行安装。另外，还需要对项目中的一些配置文件进行修改，比如在。要修改 Nginx 的配置文件，例如修改端口，可在。指令，将默认的 80 端口修改为您想要的端口，如。
Visual Studio Code前端vue项目修改后不生效问题
A5d4gpjvbbkv的博客
08-31 3241
VScode需要ctrl+s!!!
vue中更改数组中属性,在页面中不生效的解决方法
10-16
今天小编就为大家分享一篇vue中更改数组中属性,在页面中不生效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中修改数据不生效，页面不刷新
小白成长记
05-02 1万+
数据更新后，页面不刷新的可能原因：1. 初始化时data中不存在该属性；2. 通过索引值修改数组元素。修改方式：1、通过数组的pop(末尾删除)/push(末尾添加)/shift(开头删除)/unshift(开头添加)/reverse(反转)/sort(排序)/splice(起始位置，删除数量，插入元素)方法操作；2、Vue.set(vm.items, indexOfItem，vm.$set(vm.items, indexOfIte；3通过其他方式（filter/map/...）修改数组，并重新赋值给原数组
Vue深入响应式原理之对象 - 为什么我的修改没有生效？
Lazy_Sleep的博客
02-10 1544
如有错误望请指出 在开发过程中可能会遇到修改了值，视图未发生更新的情况。 实际上在vue的官方文档中也有描述，见 深入响应式原理 这里会以实际案例讲述 问题重现 下面是一个循环显示对象的vuejs代码（建议有条件的可以直接运行查看效果） <!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></s.
vue 参数修改后，页面无效（不刷新）
u014685642的博客
02-12 1726
尝试过多种办法，只有强制刷新是靠谱的 this.$forceUpdate();
vue前端项目部署之nginx配置.md
03-20
配置修改完成后，需要重启Nginx服务使更改生效。 1. **查看nginx线程**：使用`ps -ef | grep nginx`命令查看是否有nginx进程在运行。 2. **终止当前进程**：如果有进程在运行，可以通过`kill -9 [PID]`命令杀死进程...
解决在vue项目中webpack打包后字体不生效的问题
01-19
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图： 打开控制台查看元素样式，发现在开发环境的时候”微软雅黑”被解析成unicode编码并且带着双引号， 但使用...
vite构建vue3项目hmr不生效问题踩坑记录
jieyucx的博客
07-25 1815
关于热更新不生效问题，我查询了很多，有以下几点可能导致vite的hmr不生效（在Vite构建的Vue 3项目中，如果HMR（热模块替换）不生效，可能由多种原因导致。
解决vue页面DOM操作不生效的问题
11-28
现象： 使用Element UI渲染了一个树形结构，设计在鼠标移入每个节点是显示其中的操作按钮，效果如下： 下面是出错部分： 在新增节点后移入新增节点附近(图中是移入一级2)，功能按钮的显示位置出现偏移 原因查找： 经过调试发现是在新增节点后，执行DOM操作获取节点时，取到的仍是之前的结构，新增的节点并未获取到。 原因分析： 猜测是vue使用的虚拟DOM，使得页面虽然已经渲染出来，但在Vue实例中让处在在虚拟DOM中，无法获取。 解决方法： 使用Vue.nextTick，看下官方材料： ‘在下次 DOM 更新循环结束之后执行延迟回调’，这句话不是特别理解，不过可以看出DOM更新是一个循环
其他人如何查看前端工程师在本地跑的vue项目（0.0.0.0）
01-20
总之，让其他人查看前端工程师在本地运行的Vue项目，关键在于修改Vue配置以监听所有网络接口，然后分享前端机器的局域网IP和项目端口号。通过这种方式，前后端开发团队可以有效地协作，提高开发效率。
解决vue修改数据页面无效的问题
dx_zheng的博客
01-05 3849
项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性。 如下案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
vue项目发布后文件未生效
Roriring的博客
05-22 6004
修改的项目源代码没有生效（vue，js，css） 解决方案：在build文件夹下webpack.prod.conf.js文件中生成一个时间戳，在输出文件后面加上时间戳，使每次生成最新的文件 如果还存在有文件（非源代码）没有更新 解决方案：使用clean-webpack-plugin (注意使用稳定版本) 作用：将指定的出口文件夹下的文件全部删除 1.npm install -D clean-webpack-plugin@3.0.0 2.在build文件夹下webpack.prod.conf.j.
Vue 爬坑之旅 -- 修改了数据，界面为啥没反应？
Alex_Zhao 的博客
08-30 3552
<template> <div> <div> <span>用户名: {{ userInfo.name }}</span> <span>用户性别: {{ userInfo.sex }}</span> <span v-if="userInfo.officialAccount"> 公众号: {{ userInfo.officialAccount }}
vue开发过程中，修改了数据，但是页面死活不渲染改变！没变化！怎么办？6种方法解决~
热门推荐
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-05 1万+
通常是某个渲染的数组改变了层级较深的数据导致页面没有实时渲染就这么写 this.items=JSON.parse(JSON.stringify(this.items));
Vue-admin-element 在Vscode中运行，修改代码无反应的问题
FitnessSnail的博客
10-27 682
Vue-admin-element 在Vscode中运行，修改代码无反应的问题
VUE修改端口后，没启效果，原因是指定端口失效
qq_40291247的博客
08-20 4061
在config/index.js中指定 host: 'localhost', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 原因：portfinder新...
vue前端项目
最新发布
03-25
### 创建和配置 Vue 前端项目的详细方法 #### 1. 使用 `vue-cli` 图形化界面创建项目 可以通过图形化工具 `vue ui` 来快速创建 Vue 项目。此方式适合初学者以及希望直观操作的开发者[^1]。 ```bash npm install -g @vue/cli vue ui ``` 启动后会打开浏览器页面，按照提示选择模板、插件等完成项目初始化。 --- #### 2. 使用 Vite 创建 Vue 项目（官方推荐） Vite 是一种现代前端构建工具，具有更快的开发服务器启动速度和更高效的热更新机制。以下是具体步骤： 安装 Vite 并创建新项目[^2]: ```bash npm create vite@latest my-vue-app --template vue cd my-vue-app npm install npm run dev ``` 这将生成一个基础的 Vue 项目结构并启动本地开发服务。 --- #### 3. Nginx 部署 Vue 前端项目 当需要将 Vue 应用部署到生产环境中时，可以借助 Nginx 完成静态资源托管。以下是完整的流程][^[^34]： ##### **(a) 安装 Nginx** - Windows 环境下下载解压即可使用。 - Linux 下通过包管理器安装： ```bash sudo apt update && sudo apt install nginx ``` 确认 Nginx 的主配置文件路径，通常位于 `/etc/nginx/nginx.conf` 或 `/usr/local/nginx/conf/nginx.conf`。如果不确定位置，可通过以下命令查询： ```bash ./nginx -h ``` ##### **(b) 打包 Vue 项目** 在项目根目录执行以下命令生成生产版本的静态文件： ```bash npm run build ``` 打包后的文件存储于 `dist` 文件夹中。 ##### **(c) 配置 Nginx** 编辑站点配置文件（一般为 `/etc/nginx/sites-available/default`），添加如下内容： ```nginx server { listen 80; server_name localhost; root /path/to/dist; # 替换为实际 dist 路径 index index.html; location / { try_files $uri /index.html; } } ``` 最后重启 Nginx 生效更改： ```bash sudo systemctl restart nginx ``` --- #### 4. Sublime Text 编辑器配置 Vue 构建任务 为了方便在 Sublime 中直接运行 Vue 开发或构建脚本，需自定义编译系统[^5]： 进入菜单【Tools -> Build System -> New Build System】，粘贴以下 JSON 配置： ```json { "cmd": ["C:/Program Files/nodejs/npm.cmd", "run", "dev"], "file_regex": "^(..[^:]*):([0-9]+):?([0-9]+)?:? (.*)$", "path": "C:/Windows/System32/;C:/Program Files/nodejs/", "selector": "source.js", "working_dir": "$project_path", "variants": [ { "name": "调试模式", "cmd": ["C:/Program Files/nodejs/npm.cmd", "run", "dev"] }, { "name": "产品发布", "cmd": ["C:/Program Files/nodejs/npm.cmd", "run", "build"] } ] } ``` 保存该文件名为 `Vue.sublime-build` 后，在 Sublime 中切换至对应的构建系统即可一键运行。 --- ### 总结 以上介绍了四种主要的方式：利用 `vue-cli` GUI 工具简化初始设置过程；采用性能优越的 Vite 初始化现代化项目框架；依靠 Nginx 实现高效稳定的线上部署方案；并通过定制化的 Sublime 插件提升日常编码效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

we are a cloudED

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值