vue 打包后的如何在本地运行

最新推荐文章于 2024-05-23 14:46:37 发布
最新推荐文章于 2024-05-23 14:46:37 发布
阅读量726 收藏 5
点赞数
分类专栏： webpack学习 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT_iosers/article/details/110427240
版权

思路:搭建express本地服务器

步骤一: 安装express-generator

npm i express-generator -g

步骤二：创建本地服务器

在终端通过以下命令：

express myExpressProject

步骤三:进入项目目录

cd myExpressProject

在这里插入图片描述

步骤四:安装相关项目依赖

注意: 通过终端进入myExpressProject文件,执行下列代码

npm i

步骤五:把打包后的dist文件夹下的所有文件复制到myExpressProject文件下public文件夹下面

步骤六:启动项目

npm run start

查看

在浏览器中输入localhost:3000即可

一个假的前端男
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 - 完美解决 vite 打包后在本地浏览器直接打开运行，build 打包后双击 index.html 直接以 file 协议运行网站（资源、接口等正常访问，和部署到服务器运行效果一样）
王佳斌
09-07 1万+
vue3 vite怎么支持file协议本地打开，vite打包文件如何支持files协议,支持双击即可打开网页，vue3 vite打包后双击本地运行，vue3 vite打包后怎么直接在浏览器双击打开访问，vite打包后显示空白，vite如何支持本地file协议打开，vue3 vite打包后如何本地查看网站，vue3 vite项目打包后本地启动白屏怎么办，vite打包后的代码如何在本地运行，vite+vue3 打包在fIle本地index.html打开项目，打包后如何直接打开index.html文件，vue3
Vue-cli打包后如何本地查看的操作
10-14
Vue CLI 是一个由 Vue.js 团队开发的命令行工具，用于快速搭建 Vue.js 应用的脚手架。...通过遵循上述步骤，开发者可以在本地环境中轻松预览和调试打包后的 Vue.js 应用，确保其在实际部署前的正常运行。
vue项目打包后在本地运行
墨灬笙的博客
08-24 5059
vue项目打包后在本地运行 首先运行命令npm run build。运行成功后vue项目中会生成一个dist文件夹。怎样将这个文件夹在本地运行呢？需要如下几个步骤： 1、cd 到dist文件夹中，运行http-server这个命令； 如果出现下面这个错误： 就找到C盘下C:\Windows\System32\WindowsPowerShell的powershell.exe这个文件并用管理员方式进行运行，点开后输入命令 set-ExecutionPolicy RemoteSigned, 之后在项目终端中运行n
vue打包本地启动方案
最新发布
qq_28875189的博客
05-23 707
在本地启动Vue打包的方案有很多种。
vue项目打包后本地运行方法
zjltci的博客
04-20 7763
搭建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项目
zhengyun1568的博客
11-10 2009
转载自：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.
本地运行VUE打包后的文件
IT水很深，路还很长
07-14 1567
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-cli打包后本地运行dist文件中的index.html操作
10-14
此外，描述中还提到了一些解决Vue项目打包后在本地访问时页面空白的补充知识。页面空白通常与Vue CLI的版本有关，Vue CLI 2和Vue CLI 3处理打包后的静态资源路径的方式有所差异。对于Vue CLI 2，需要修改config/...
vue编译打包本地查看index文件的方法
08-27
本文将详细介绍如何在Vue编译打包后，本地查看`index.html`文件，以及`/build/config/index.js`配置文件中的`assetsPublicPath`参数的作用。 首先，确保你已经安装并配置了Vue CLI（Vue.js的命令行工具）。如果你还...
vue打包后显示空白正确处理方法
08-28
例如，如果打包后的文件需要在本地文件系统中直接打开，而不是通过服务器提供，可能需要设置 `publicPath` 为 `./` 或者相对于当前 HTML 文件的相对路径，如 `../../`。 ```javascript module.exports = { ...
如何修改Vue打包后文件的接口地址配置的方法
10-15
为了方便管理和维护，本文介绍了如何修改Vue打包后文件的接口地址配置。 在常规的Vue项目中，我们可以简单地通过修改配置文件来改变接口地址。具体操作是在项目的config文件夹下找到dev.env.js（开发环境配置）和...
vue打包后dist文件在本地启动运行
qq_38902432的博客
04-04 4946
vue项目开发好后，想在本地运行测试最后的打包文件可以通过http-server来启动。最后在浏览器输入：127.0.0.1:9007就可以查看了。
vue项目打包之后怎么在本地运行
热门推荐
萧萧的博客
07-12 1万+
vue项目打包后的文件需要在本地运行，这里介绍两种方法 （一）搭建express本地服务器 1、安装express-generator npm i express-generator -g 2、创建一个express项目 express my-express-project 3、进入项目目录 cd my-express-project 这时候能看到my-express...
vue项目打包后如何在本地运行
weixin_48667689的博客
08-05 2103
vue项目打包后如何在本地运行
vue3项目打包后，将dist文件在本地运行
weixin_66582617的博客
03-05 1536
vue3项目开发好后，打包完成，想在本地运行测试打包文件可以通过http-server来启动。2、打包完成后，进入dist打包文件。4、启动dist文件，并指定端口。3、安装http-server。
VUE项目打包 本地运行方法
Geek-Haoyu
08-31 6108
VUE项目打包完成后 我们通常需要在本地进行测试 然后再放到服务器上 第一步：打包项目 npm run build 第二步：根目录新建 app.js文件 第三步：复制以下代码到app.js var express = require('express'); var fs = require('fs'); var http = require('http'); var app = expr...
vue项目npm run build 打包之后如何在本地访问
骨子里的偏爱
04-26 1254
vue项目npm run build 打包之后如何在本地访问
vue打包后dist文件如何在本地启动
shmilywx的博客
01-25 1063
然后打开浏览器访问就可以了，如图是启动成功。1.首先全局安装http-server。
webpack + vue 打包后本地运行网页空白
06-08
如果你使用 webpack + vue 打包后本地运行网页空白，可能是因为打包后的文件路径不正确，导致页面无法正确加载。 你可以尝试以下几个解决方案： 1. 检查打包后的文件路径是否正确，确保所有的文件都被正确地打包到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值