Vue3打包后在本地运行

最新推荐文章于 2024-06-11 23:22:36 发布
最新推荐文章于 2024-06-11 23:22:36 发布
阅读量2.6k 收藏 10
点赞数 3
分类专栏： 前端 vue 踩坑日记 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42764782/article/details/124129583
版权
前端 同时被 3 个专栏收录
7 篇文章 0 订阅
订阅专栏
vue
6 篇文章 0 订阅
订阅专栏
踩坑日记
3 篇文章 0 订阅
订阅专栏

背景

先在项目跟目录正常打包生成文件dist文件

npm run build

发现打包后目录变这种了，这种本地是无法直接访问的，

解决办法

1.安装本地访问服务插件serve

npm install -g serve

2.在dist文件夹里，运行

npm run serve

结果

然后就可以直接访问了

 

blue T_T
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 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-cli打包后本地运行dist文件中的index.html操作
10-14
主要介绍了vue-cli打包后本地运行dist文件中的index.html操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3项目打包后，将dist文件在本地运行
weixin_66582617的博客
03-05 1484
vue3项目开发好后，打包完成，想在本地运行测试打包文件可以通过http-server来启动。2、打包完成后，进入dist打包文件。4、启动dist文件，并指定端口。3、安装http-server。
vue3打包后dist文件在本地启动运行的步骤
最新发布
会写点代码
06-11 766
vue3打包好项目后，想直接运行查看效果，可以通过http-server来启动。
vue项目打包后本地运行方法
zjltci的博客
04-20 7753
搭建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...
vue3打包的静态项目怎么在本地上运行
weixin_42576186的博客
01-11 1751
在 Vue 3 中，打包出来的静态项目可以通过以下步骤在本地运行: 安装一个静态服务器，比如 http-server。 npm install -g http-server 进入打包后的项目文件夹，执行以下命令启动服务器，开启本地服务 http-server -c-1 -o 在浏览器中访问 localhost:8080 就能看到项目运行了。 注：8080 是默认的端口,如果你的端口被占用...
vue3+ts项目打包后的本地访问
zhl999999999的博客
09-09 489
vue3项目打包后的页面访问，不可点击HTML访问会报错，应ip访问。
vite/vue3打包后运行
岁月如歌去，十年弹指间
05-08 650
需要通过live-server 或者服务器运行。vite不支持 本地双击运行。
vue项目打包后如何在本地运行
weixin_48667689的博客
08-05 2094
vue项目打包后如何在本地运行
vue项目打包后在本地运行
墨灬笙的博客
08-24 5047
vue项目打包后在本地运行 首先运行命令npm run build。运行成功后vue项目中会生成一个dist文件夹。怎样将这个文件夹在本地运行呢？需要如下几个步骤： 1、cd 到dist文件夹中，运行http-server这个命令； 如果出现下面这个错误： 就找到C盘下C:\Windows\System32\WindowsPowerShell的powershell.exe这个文件并用管理员方式进行运行，点开后输入命令 set-ExecutionPolicy RemoteSigned, 之后在项目终端中运行n
vue编译打包本地查看index文件的方法
08-27
下面小编就为大家分享一篇vue编译打包本地查看index文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在开发Vue3项目时，我们通常会遇到一个问题：在本地开发环境中，项目能够顺利地请求到后台接口，但在打包部署到服务器后，却无法获取到数据。这种情况通常是由于请求的远程地址发生了变化，导致接口调用失败。本文将...
vue打包后显示空白正确处理方法
08-28
例如，如果打包后的文件需要在本地文件系统中直接打开，而不是通过服务器提供，可能需要设置 `publicPath` 为 `./` 或者相对于当前 HTML 文件的相对路径，如 `../../`。 ```javascript module.exports = { ...
【vue项目本地打包测试，本地运行dist文件夹】
General_D的博客
09-28 1748
vue项目打包：npm run build //或者 # 构建测试环境 npm run build:stage # 构建生产环境 npm run build:prod 本地虚拟服务依赖下载：npm install http-server -g 在对应生成的打包文件夹dist文件夹运行命令 http-server 复制地址到浏览器就可以啦~
如何将vue项目打包成.exe文件，不想踩坑就来这里！
weixin_61877032的博客
07-03 7016
如何将vue项目打包成.exe文件；electron打包后的.exe文件请求域名为何为file:///；electron打包后的文件路由无法挑战；
Vue3打包后无法运行
YanisWu的博客
03-13 1130
Vue3打包问题
Vue项目打包以及本地服务器创建并部署项目
Alin_Wu_的博客
04-15 828
此时直接访问 localhost:5005 就可以看见用vue写的页面了（默认访问的是index.html）如果不显示页面，ctrl+c停止服务器并重新启动就可以了。在与server.js同级下创建一个static文件夹(一般是用static命名)，将打包好的dist下的文件复制到static文件夹下，修改server.js代码如下。路由的工作模式是hash，各种乱点再刷新是没问题的。1.用正则匹配判断哪些是前端路由，哪些是后端路由（没了解，不太懂）2.用npm的一个中间件。
vue3 项目打包后怎么可以在本地直接打开
qq_21444067的博客
08-29 8560
vue的项目编译打包后默认情况下需要有服务器才能打开，那么在不用服务器的情况下怎么打开呢 首先在项目根目录下的vue.config.js（如果没有就自己创建一个）里加一个配置项 publicPath:"./" 或者 publicPath:"" （这个配置项的目的是指明项目在服务器下的路径，这里设置成相对路径） module.exports={ publicPath:"./" } 然后把rutour的历史模式改为 hash模式（因为hash模式不会走服务器，而是在本地直接处理） vue3的项目在
vue3 打包后直接运行html
02-08
Vue3 打包后直接运行 HTML 的步骤如下： 1. 在 Vue3 项目的根目录下，执行 `npm run build` 命令进行打包。这会生成一个 `dist` 文件夹，其中包含打包后的代码。 2. 打开 `dist` 文件夹，找到生成的 `index.html` 文件。 3. 将 `index.html` 文件复制到你想要运行的地方，例如服务器的公共目录或者本地的文件夹。 4. 打开复制到的 `index.html` 文件，通过浏览器打开即可开始运行 Vue3 的应用。 注意事项： 1. 在复制 `index.html` 文件到其他地方之前，确保 `dist` 文件夹中的所有文件都已经被复制，因为 `index.html` 中引用的文件都存在于 `dist` 文件夹中。 2. 如果 Vue3 的应用需要与后端 API 进行交互，确保在复制 `index.html` 文件之前将相关的 API 地址配置正确。 3. 如果在应用中使用了路由功能或者其他额外的依赖库，确保将这些依赖文件也一同复制到目标位置。 通过上述步骤，你可以将 Vue3 的应用打包后直接运行在 HTML 中，无需依赖开发环境。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值