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

最新推荐文章于 2025-09-25 14:53:30 发布
原创 最新推荐文章于 2025-09-25 14:53:30 发布 · 829 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack

该博客介绍了搭建本地服务器的思路与具体步骤。包括安装express - generator、创建本地服务器、进入项目目录、安装相关项目依赖、复制打包文件夹内容，最后启动项目并可在浏览器查看。

思路:搭建express本地服务器

步骤一: 安装express-generator

npm i express-generator -g

步骤二：创建本地服务器

在终端通过以下命令：

express myExpressProject

步骤三:进入项目目录

cd myExpressProject

在这里插入图片描述

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

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

npm i

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

步骤六:启动项目

npm run start

查看

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

Vue3 - 完美解决 vite 打包后在本地浏览器直接打开运行，build 打包后双击 index.html 直接以 file 协议运行网站（资源、接口等正常访问，和部署到服务器运行效果一样）
🏆 前端领域优质创作者
09-07 1万+
vue3vite怎么支持file协议本地打开，vite打包文件如何支持files协议,支持双击即可打开网页，vue3vite打包后双击本地运行，vue3vite打包后怎么直接在浏览器双击打开访问，vite打包后显示空白，vite如何支持本地file协议打开，vue3vite打包后如何本地查看网站，vue3vite项目打包后本地启动白屏怎么办，vite打包后的代码如何在本地运行，vite+vue3打包在fIle本地index.html打开项目，打包后如何直接打开index.html文件，vue3
vue打包后直接本地访问index.html
小白白的博客
12-20 1533
在vue.config.js 文件，没有的话就新建一个，并添加publicPath: './ ’router.js 把mode改成。
vue打包本地启动方案
qq_28875189的博客
05-23 1481
在本地启动Vue打包的方案有很多种。
vue打包后如何在本地运行？
先做到 再看见
08-01 861
本文介绍了Springboot+Vue项目打包部署的全流程：1）配置vue.config.js设置静态资源路径；2）创建VueRouter实例并配置hash模式路由；3）通过npm run build生成dist文件夹；4）后端配置静态资源处理器，指定static目录并设置访问权限；5）添加重定向控制器将根路径指向前端入口页面。最终实现本地运行打包后的Vue应用，通过访问根路径自动加载前端页面。
Vue项目vite打包后的文件在本地运行
最新发布
zyhui994的博客
09-25 295
本文介绍了如何在本地创建服务器运行打包后的dist，来查看拆包后的各js的加载情况
vue项目打包之后怎么在本地运行
热门推荐
萧萧的博客
07-12 2万+
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 2422
vue项目打包后如何在本地运行
vue文件打包后怎么运行
m0_74358570的博客
08-23 644
vue打包、vue打包后在本地运行
vue-cli打包后本地运行dist文件中的index.html操作
10-14
此外，描述中还提到了一些解决Vue项目打包后在本地访问时页面空白的补充知识。页面空白通常与Vue CLI的版本有关，Vue CLI 2和Vue CLI 3处理打包后的静态资源路径的方式有所差异。对于Vue CLI 2，需要修改config/...
如何修改Vue打包后文件的接口地址配置的方法
10-15
为了方便管理和维护，本文介绍了如何修改Vue打包后文件的接口地址配置。 在常规的Vue项目中，我们可以简单地通过修改配置文件来改变接口地址。具体操作是在项目的config文件夹下找到dev.env.js（开发环境配置）和...
关于vue打包后如何运行
有问题可关注公众号：前端研究院 后台输入问题回复
01-11 7947
1.首页安装nginx-v1.13.8   安装包私信我要吧~~    先解压到一个盘里  2.用记事本打开，修改端口号，我这边修改的是5200 3.启动这个nginx.exe    双击后  会有一个命令行窗口一闪而过  4.然后访问 http://localhost:5200，你会看到这个页面 5.然后将刚刚打包好的dist文件（就是你npm run build打包后
vue项目打包后本地运行方法
zjltci的博客
04-20 8057
搭建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项目npm run build 打包之后如何在本地访问
骨子里的偏爱
04-26 2417
vue项目npm run build 打包之后如何在本地访问
vue项目打包后在本地运行
墨灬笙的博客
08-24 5397
vue项目打包后在本地运行 首先运行命令npm run build。运行成功后vue项目中会生成一个dist文件夹。怎样将这个文件夹在本地运行呢？需要如下几个步骤： 1、cd 到dist文件夹中，运行http-server这个命令； 如果出现下面这个错误： 就找到C盘下C:\Windows\System32\WindowsPowerShell的powershell.exe这个文件并用管理员方式进行运行，点开后输入命令 set-ExecutionPolicy RemoteSigned, 之后在项目终端中运行n
【转】怎样运行 Vue 打包后的项目
qq_33422122的博客
03-01 4847
Vue build 后运行命令，无需放入tomcat根目录
vue项目打包后如何本都部署访问
zy199701的博客
07-04 2936
2、输入 npm i express -s 是用于在 Node.js 项目中安装 Express 框架的命令。app.use(express.static(‘./dist’)) // dist 是项目的打包资源路径。3、.将项目打包好的dist文件放入其中以及新建一个app.js文件用于运行。缺点，输入其他路由报错，点击按钮可以跳转，不知道怎么解决，直接转入方式二。1、新建一个文件夹 进入目录后打开cmd 输入npm init -y。5、接着在cmd输入运行命令 node .\app.js。
Vue打包后如何在本地直接运行？
LoveZJC96的博客
05-30 2368
1.打包 npm run build 2. 解决方法 1.安装express-generator生成器 npm install express-generator -g 2.创建一个express项目 express 名称 3. 进入express项目并安装项目依赖 npm install 4.把dist目录下的所有文件复制到express项目的public文件夹下 5.启动express项目 npm start 6.打开浏览器，输入 http://loca.
vue项目build 打包之后如何本地访问
qq_44776454的博客
06-18 1886
Vue项目构建后实现本地访问的方法
vue项目本地打包测试，本地运行dist文件夹
团酱
05-17 2145
根目录下创建 .env.development .env.production .env.staging。
vue打包后在本地运行导致如下问题：activated下的函数不执行，如this.i_image();this.getWxmessages()，但是下写的代码却可以执行，如console.log(1)
10-01
当你将Vue应用打包并在本地运行时，如果`activated`生命周期钩子中的某些函数不被执行，可能是以下几个原因： 1. **异步加载**：如果你的函数依赖于数据初始化完成或者其他异步操作，确保在函数内部检查`mounted`或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值