本地运行vue打包项目

最新推荐文章于 2024-09-14 08:20:21 发布
最新推荐文章于 2024-09-14 08:20:21 发布
阅读量725 收藏
点赞数
文章标签： vue
原文链接：https://blog.csdn.net/jiandan1127/article/details/108383707
版权
本文介绍了两种本地服务器搭建方法：使用http-server-spa快速启动静态文件服务器，以及通过下载并配置nginx实现。对于http-server-spa，详细说明了安装和运行步骤，包括指定目录、启动文件和端口。对于nginx，讲解了下载、配置端口和文件路径，以及启动服务器的过程。这两种方法都是为了在本地运行和测试前端应用。
摘要由CSDN通过智能技术生成

1. 使用 http-server-spa

  1. 全局安装 http-server-spa
yarn global add http-server-spa
// 或者
npm i -g http-server-spa
  1. 运行
// http-server-spa <directory> <fallback> <port>
// 运行 dist 为目录，index.html 启动文件，端口 8080
http-server-spa ./dist/ index.html 8080

ps: ./dist/ 后面有个空格

  1. 浏览器输入 localhost:8080
    在这里插入图片描述
  2. http-server也可以,差不多的方法,想用可以自行百度

2. 使用nginx

  1. 下载nginx
    官网下载地址
  2. 解压, 打开conf文件夹,找到nginx.conf文件
    在这里插入图片描述
  3. 修改端口号 和 文件路径
    在这里插入图片描述
  4. 启动nginx
    在这里插入图片描述
  5. 浏览器输入 localhost:8088
    在这里插入图片描述
  • 还有express本地服务器的方法, 大同小异,百度一下, 略略略…
YHJ
关注
专栏目录
VUE打包本地运行
weixin_41004986的博客
04-18 276
VUE打包本地运行 方式一 step1: 安装 http-server npm install http-server -g step2: 包目录下运行 http-server 或者 使用vscode :go alive插件 方式二 step1: 修改config/index.js 把assetsPublicPath: '/'改成assetsPublicPath: ‘./’,dist文件夹里的文件...
VUE打包的项目在本地运行
Even_ycp的博客
01-15 3774
这个是基于nodeJs搭建的一个简易的服务器。 项目结构也很简单，代码就几句。关键是不用在vue.config.js里面配置打包的路径。我自己用的挺好。就记录下来，以防丢失！ 我把我的打包好dist文件夹的文件结构也发一下 dist是vue打包好的文件夹。要用的话就创建一个文件夹，初始化，我把package.json、package-lock.json的代码贴出来。你们复制到你们的json文件...
本地运行打包后的vue项目
zhengyun1568的博客
11-10 2044
转载自：https://blog.csdn.net/qq_33718889/article/details/88725525?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.
推荐文章：探索现代C++的力量 —— HttpServer项目深度解读
最新发布
gitblog_00625的博客
09-14 305
推荐文章：探索现代C++的力量 —— HttpServer项目深度解读 HttpServer 项目地址: https://gitcode.com/gh_mirrors/https/HttpServer ...
vue打包本地启动方案
qq_28875189的博客
05-23 1061
在本地启动Vue打包的方案有很多种。
vue项目打包后本地运行方法
zjltci的博客
04-20 7846
搭建express本地服务器 1.安装express-generator （cmd全局安装） npm i express-generator -g 2.cmd打开要创建项目的文件夹，跑下面的代码，创建一个express项目 express my-express-project 注：my-express-project 是项目名称，可随意自取，只要运行下面命令时保持统一即可。 3.进入项目目录 cd my-express-project 这时my...
Vue项目打包
qq_32054169的博客
09-14 453
1.vue cli 3 打包部署到服务器上出现net::ERR_ABORTED 404 (Not Found)问题解决 解决方法：配置vue.config.js如下： module.exports = { publicPath: "./" } 2.vue cli打包后运行 使用npm run build命令进行打包，但是直接打开index.html是无法看到内容的，因为无法加载其中的内容，所以必须使用服务器来打开网页，这里以express服务器为例查看 1.全局安装express-g.
本地serve跑vue或者react打包后的项目
刻痕
06-13 1487
## 本地跑vue或者react打包后的项目 不需要本地服务器跑打包后的build文件夹（也可能是 dist文件夹）项目。 **一般方案：** 1. 方案一：本地电脑运行serve服务（本文~~） 2. 方案二：vscode编辑器安装拓展【live server】，build文件夹index.html右击菜单运行live server，自动打开浏览器看结果（本质上和方案一一样） 3. 方案三：hbuliderX编辑器，直接运行index.html就是本地微服务，自动打开浏览器看结果（本质上和方案一
vue-cli打包后本地运行dist文件中的index.html操作
10-14
标题和描述中提到的核心知识点是如何使用Vue CLI打包后的项目在本地环境中运行。Vue CLI是Vue.js的官方命令行工具，它简化了Vue.js项目...通过理解和掌握这些知识点，可以更好地处理Vue项目打包和本地运行的常见问题。
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
12-12
Webpack 是一款强大的模块打包...总之，Webpack 打包 Vue 项目后生成的 `dist` 文件需要部署到服务器才能正确运行，通过结合 Express.js 可以快速搭建一个简单的服务器环境，实现打包后 Vue 项目的本地预览或线上部署。
Vue 打包的静态文件不能直接运行的原因及解决办法
01-22
然而在使用 npm run build 打包项目时，却发现打包好的项目在浏览器中直接打开好像什么都没有？ 原因 查看了一下打包后的 index.html 源码，终于发现了一个重要的点： 所有涉及到路径的地方全都是以 / 开头的 下面...
解决vue项目打包上服务器显示404错误,本地没出错的问题
01-22
2、运行，在本地运行没问题，接着打包上服务器，遇到404的错误，如下 这是webpack打包的结果，解决办法如下 1、修改build文件夹下的utils.js文件，大约在51行添加 publicPath:../../ if (options.extract) { ...
vue编译打包本地查看index文件的方法
08-27
下面小编就为大家分享一篇vue编译打包本地查看index文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
本地运行VUE打包后的文件
IT水很深，路还很长
07-14 1610
VUE项目打包完成后 我们通常需要在本地进行测试 然后再放到服务器上 第一步：打包项目 npm run build 第二步：根目录新建 app.js文件 第三步：复制以下代码到app.js var express = require('express'); var fs = require('fs'); var http = require('http'); var app = express(); app.use(express.static('./dist')); app.use(function (r
本地运行vue打包后的dist 文件
weixin_39458031的博客
08-11 951
build 之后会生成一个dist目录。打包完命令行是不是这样提示了： Build complete. Tip: built files are meant to be served over an HTTP server. //打包的文件要在http server下运行 Opening index.html over file:// won’t work. //直接打开这个文件不会生效 所以呢， dist目录里的index.html 和static（默认资源文件）一起放在一个server（如tomcat，
vue项目本地打包测试，本地运行dist文件夹
团酱
05-17 1602
根目录下创建 .env.development .env.production .env.staging。
vue项目打包后如何在本地运行
weixin_48667689的博客
08-05 2213
vue项目打包后如何在本地运行
本地打包完启动项目
qq_45505241的博客
03-21 133
2.yarn build生成前端包，例如包名称为dist。先本地全局安装http-server。3.进入项目根目录 运行。
Vue项目build打包后如何运行
宁坡浪子的博客
10-31 9225
npm run build命令进行打包后的程序如何在本地运行 1.全局安装express-generator生成器。 npm install express-generator -g 2.创建一个express项目。 express 项目名 3.进入项目目录，安装相关项目依赖。 cd 项目名 npm install//或cnpm install 4.将Vue build后生成的dist文件夹下的所有文件复制到express项目的publick文件夹下面，然后运行npm start...
vue打包后的项目怎么运行？
06-11
如果你只是想在本地运行打包后的应用程序，可以使用一个静态文件服务器，比如 live-server 或者 http-server。你可以通过全局安装这些工具，然后在命令行中运行 `live-server` 或者 `http-server` 命令来启动本地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值