vue项目本地模拟在服务端情况

最新推荐文章于 2024-03-07 09:46:57 发布
最新推荐文章于 2024-03-07 09:46:57 发布
阅读量247 收藏
点赞数
分类专栏： vue项目 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yunbabac/article/details/120429793
版权

做项目封装axios时遇到了问题，要判断是开发环境与生产环境等，修改baseurl

怎么在本地模拟服务器呢，要查看一下变量在服务端是否为正确的值

运行打包命令，npm run build

在打包好的dist文件夹index.js文件中查看，格式化一下

 鼠标右键，点击live server 开启本地服务，（live server 为vscode上的一个插件）

 报错找不到资源，原因为路径问题，需要把所有路径‘/xxxxxx’改为‘./xxxx'或‘xxx’

方法一：在vue.config.js中加加一个配置

 注意，真正打包放到服务器上时需要注释掉

重新打包

开启本地服务

ok

解决

是云呀！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-mock-demo:简单的模拟服务器
05-18
Vue-mock-demo 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run mock api serve npm run mock # run mock api serve & serve with hot reload npm run serve 有关工作原理的详细说明，请查看的和。
vue中模拟后台服务器express
weixin_42799526的博客
10-19 290
在vue.config.js文件下 configureWebpack:{ devServer:{ before(app){ //模拟后台服务器express app.get("/api/login",function(req,res){ const {username,passwd} = req.query; ...
vue 虚拟服务器,vue.js - 在本地虚拟服务器中运行Webpack + Vue - SO中文参考 - www.soinside.com...
weixin_42628941的博客
08-13 473
Operating System: Mac OSX High SierraNode Version: v10.15.0NPM Version: 6.13.6webpack Version:webpack-dev-server Version:Browser: Chrome我的虚拟服务器是http://lab.local，这指向xampp / htdocs / lab我在xampp / htdocs...
VueDemo-24项目打包上线部署和25本地搭建服务器，模拟项目上线
a9874561328的博客
02-09 528
24.项目打包上线部署 1.项目打包 yarn build 打包出来的dist文件就是我们需要上传的项目文件目录 监测一下dist/index.html <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content
VUE2项目的搭建
weixin_42017221的博客
02-17 1856
搭建项目时，需要确认电脑上是否有与如何确认电脑上是否存在npm与node呢？按住win+r输入cmd打开命令提示符输入node -v 与-v来确认是否有安装。
vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）
10-19
在Vue CLI创建的项目中，使用vue-resource获取本地JSON数据以模拟服务端返回的数据，是一种常见于开发初期或无真实后端支持时的调试手段。本文将详细介绍如何配置和使用这个过程。 首先，确保你已经安装了vue-...
基于Vue 服务端Cookies删除的问题
10-17
在Vue项目中，开发者可能会遇到一个问题：在本地开发环境中，可以正常删除Cookies，但在部署到服务器后，却发现无法删除。这主要是由于不同环境下的缓存处理机制差异所引起的。在Web缓存中，主要有三种类型： 1. ...
VUE DEMO之模拟登录个人中心页面之间数据传值实例
10-16
在这个VUE DEMO中，我们看到了一个模拟登录和个人中心页面的数据传递实例。这个实例主要通过浏览器的`localStorage` API来存储和检索用户信息，实现了跨页面的数据持久化。 首先，我们看`login.html`页面。在这个...
VUE实现静态数据的CRUD功能
11-23
- `data.json`: 可能是一个静态数据文件，用于在没有后端的情况下模拟数据。 学习这个案例，你可以深入了解Vue.js的组件化开发、状态管理和与后端交互的方法。同时，它也提供了一个实际应用场景，帮助你巩固前端与...
vue本地打包文件 运行 liveServer
qq_38935512的博客
12-15 1506
live-server 是一款 npm 工具，全局安装 npm i -g live-server 后，项目目录使用 live-server 命令行命令便可直接在浏览器中预览（默认找 index.html，其他需要带上文件名空格后跟在后面），并且自动全局监听实时更新。关于live-server配置 可以在setting.json 中去配置 可以百度一下它的属性。
前端打包后生成的dist 或 build目录，如何在本地启动服务运行
AS_TS的博客
02-02 9857
运行，会打包后会产生dist或build目录一般情况下，直接打开dist 或 build 目录下的index.html会在浏览器看到内容。然而发现网页一片空白，打开了控制台，看到一片404的各种找不到资源，或者出现跨域的提示。
本地vs code 插件 模拟服务器环境调试前端包(live-server 运行dist包,并解决接口跨域问题)
最新发布
weixin_43187898的博客
03-07 877
3. 找到vscode右下角的“Go Live”按钮,点击就会执行一个默认端口号为5555web服务。4. 打开setting.json配置live-server端口号代理等属性。1. 安装vscode live-server插件。2. 用vscode单独打开dist。
手动实现简单Live-server. 开启本地服务器 node
bao
04-29 694
需求 在本地通过 http 的方式来访问 打包后的vue项目 打包后的文件直接在浏览器中打开会是 以 file:// 开头的, 打开之后文件引入的路径就出现了问题. 导致页面显示空白, 资源路径错误等问题. 使用 http 的方式访问, 以解决以上问题. 环境需要 node 在打包后的 dist (打包后的文件夹名称) 下新建, app.js (自己随意命名) app.js 内容 var http = require('http') var fs = require('fs') // 操作文件
Vue各种插件的使用步骤
weixin_52703987的博客
03-09 1615
–save和–save-dev的区别 –save || -S // 运行依赖（发布） –save-dev || -D //开发依赖（辅助） –save生产环境的所需依赖也就是咱们的线上环境 –save-dev开发和测试所需的依赖也就是咱们本地环境 下面的我都没进行设置–save或–save-dev，请大家自行根据需求设置 1.小黑框安装 vue3安装 vue create 项目名 -b -n vue2安装 vue i webpack 名 2.vuex安装 $ yarn安装 yarn add vue
使用docker构建vue项目并成功运行在本地和线上
12-09 2521
windows10 + node + vue + docker都已经安装齐全因为要用这个镜像来构建你的vue项目，就像给vue项目提供一个环境一样。
Vue实战044：Mockjs模拟服务器Api接口并返回数据详解
linjingyg的博客
01-25 1480
　　前言 　　现在越来越多项目都采用前后端分离模式开发，这样前后端就可以同时开发，而且互不影响。但是目前项目跟进的很紧，没什么时间写后台，但是前端没接口测试可能会隐藏很多bug，到后面再来排查就麻烦了。所以在后端接口没有开发之前，我打算先用mockjs模拟下后端服务器，生成模拟的假数据，以便于顺利进行前端的开发工作。 　　 　　什么是Mockjs 　　Mockjs 是一款模拟数据生成工具，模拟 Ajax 请求，通过随机生成数据来模拟各种业务场景并返回模拟数据，帮助前端在后台未提供接口时实现独立开
前端本地启用模拟服务，以及解决vue跨域问题
splx2013的博客
06-02 794
1.本地启动node服务 提前安装好node的相关配置，然后在任何位置新建文件夹，文件夹下新建index.js文件，输入以下代码： let express = require('express') let app = express() // app.use((req, res, next) => { // res.append('Access-Control-Allow-Origin', '*') // res.append('Access-Control-Allow-heade
Vue：json-server搭建本地模拟服务器
Rui012345的博客
03-23 1216
前端项目需要设定好数据接口以及数据的定义，剩下的就可以各自开发，最后集成测试。 利用json-server快速搭建本地服务器模拟后台数据的请求。 1.首先你的电脑中需要安装nodejs，建议使用最新版本，并且利用vue-cli初始化好项目，然后安装json server npm install json-server --save 2.提供json数据文件。 　　在项目static目录下...
vue 加载太慢_如何提高Vue项目首页的加载速度
weixin_39561431的博客
12-21 3272
为何当一个VUE项目过大时，打包之后初次访问首页加载速度会异常的缓慢，是什么原因导致以及如何解决这些问题?首页打开速度慢的原因其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需要的资源，将html js 图片文件下载到本地解析后显示出来，如果出现网页加载速度慢，打不开无非以下几个原因：程序自身的Bug导致页面加载异常项目的资源太大(如果js 大的图片)导致访问浏览器从服务器获...
vue项目本地环境搭建
11-20
Vue项目的本地环境搭建需要以下几个步骤： 1. 安装Node.js：首先需要在本地电脑上安装Node.js，Node.js是一个JavaScript的运行环境，Vue项目需要依赖Node.js来运行和构建。可以在Node.js官方网站上下载对应操作系统的安装包，进行安装。 2. 安装Vue CLI：Vue CLI是Vue.js官方提供的一个用于快速搭建Vue项目的脚手架工具，可以通过命令行工具进行安装。打开终端或命令提示符窗口，输入以下命令进行全局安装Vue CLI： ```shell npm install -g @vue/cli ``` 3. 创建Vue项目：安装完成Vue CLI后，就可以使用Vue命令创建一个新的Vue项目了。在命令行窗口中，进入想要创建项目的目录，然后输入以下命令： ```shell vue create 项目名称 ``` Vue CLI会自动下载并配置项目所需的依赖和文件结构。在这个过程中，可以选择是否使用默认的配置或手动选择配置。完成后，可以进入项目目录： ```shell cd 项目名称 ``` 4. 运行项目：进入项目目录后，可以使用以下命令来启动项目： ```shell npm run serve ``` 该命令会启动一个本地开发服务器，并监听默认端口号（一般是8080）。成功启动后，可以在浏览器中访问`http://localhost:8080`来预览项目。 至此，Vue项目的本地环境搭建就完成了。可以在项目目录下进行开发，修改代码后会自动热重载。在完成开发后，可以使用`npm run build`命令将项目打包成可部署的静态文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值