vue3+ts项目打包后的本地访问

最新推荐文章于 2024-06-18 12:15:22 发布

zhl999999999

最新推荐文章于 2024-06-18 12:15:22 发布

阅读量543

点赞数

文章标签： vue.js 前端 javascript typescript

本文链接：https://blog.csdn.net/zhl999999999/article/details/132780060

版权

注意：打包之后不可直接点击html访问，需要给项目安装本地服务！

1、安装serve
npm i -g serve

2、打包项目
npm run build 生成dist文件夹

3、本地访问
serve dist

运行service dist之后的控制台

可复制下方的地址运行打包后的项目，运行之后控制台效果；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhl999999999

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue3+ElementPlus+TS

ianutt的博客

09-06

1378

Vue3

vite3+vue3 项目打包优化

前端知识分享喵

05-16

2110

现在很多小伙伴都已经使用 Vite + Vue3 开发项目了，如果你是 “前端架构师” 或者是 “团队核心” 的话，不得不可考虑的一个问题就是性能优化。本篇文章主要讲述的是生产环境下 Vite + Vue3 打包优化。

参与评论您还未登录，请先登录后发表或查看评论

vue3项目打包后，将dist文件在本地运行

weixin_66582617的博客

03-05

1778

vue3项目开发好后，打包完成，想在本地运行测试打包文件可以通过http-server来启动。2、打包完成后，进入dist打包文件。4、启动dist文件，并指定端口。3、安装http-server。

vue项目build 打包之后如何本地访问

最新发布

qq_44776454的博客

06-18

1183

Vue项目构建后实现本地访问的方法

如何本地打开vue3+vite+ts项目打包的dist文件夹下index.html进行把玩

洋茄子炒鸡蛋的博客

08-10

6146

最近做一个vue3+vite3+ts的项目，配置了多入口页面，想不通过部署到服务器的方式在本地看一下打包后的效果。

vue3 项目打包后怎么可以在本地直接打开

qq_21444067的博客

08-29

9059

vue的项目编译打包后默认情况下需要有服务器才能打开，那么在不用服务器的情况下怎么打开呢首先在项目根目录下的vue.config.js（如果没有就自己创建一个）里加一个配置项 publicPath:"./" 或者 publicPath:"" （这个配置项的目的是指明项目在服务器下的路径，这里设置成相对路径） module.exports={ publicPath:"./" } 然后把rutour的历史模式改为 hash模式（因为hash模式不会走服务器，而是在本地直接处理） vue3的项目在

Vue3打包后在本地运行

qq_42764782的博客

04-12

2809

背景先在项目跟目录正常打包生成文件dist文件 npm run build 发现打包后目录变这种了，这种本地是无法直接访问的，解决办法 1.安装本地访问服务插件serve npm install -g serve 2.在dist文件夹里，运行 npm run serve 结果然后就可以直接访问了 ...

vue项目npm run build 打包之后如何在本地访问

骨子里的偏爱

04-26

1449

vue项目npm run build 打包之后如何在本地访问

Vue3+Ts+Vite+History模式，部署在三级目录下

weixin_39964419的博客

02-05

636

Vue3+Ts+Vite+History模式，项目打包后部署到Nginx三级目录下，并且经过一次Nginx转发。项目打包部署后，页面访问空白

Vue3项目打包后部署到服务器请求不到后台接口解决方法

10-15

在开发Vue3项目时，我们通常会遇到一个问题：在本地开发环境中，项目能够顺利地请求到后台接口，但在打包部署到服务器后，却无法获取到数据。这种情况通常是由于请求的远程地址发生了变化，导致接口调用失败。本文将...

Vite创建vue3+ts+pinia项目流程

luoxiaonuan_hi的博客

07-01

843

Vite创建vue3+ts+pinia项目流程

vue3打包后dist文件在本地启动运行的步骤

会写点代码

06-11

1653

vue3打包好项目后，想直接运行查看效果，可以通过http-server来启动。

Vue-cli打包后如何本地查看

qq_36098938的博客

09-20

2334

Vue-cli打包后如何本地查看 Vue-cli打包成dist后默认是必须在http服务器环境下才能正常运行。可以在本地启动一个http-server服务查看，操作步骤如下：全局安装http-server：npm install -g http-server 进入dist根目录下cd dist 再输入指令：serve 输出serve: Running on port 5000,即服...

让 VIte+Vue3 打包的项目，在本地可以双击 index.html 打开运行

11-25

3475

的方式运行，双击 index.html 是无法运行的。通常Vue3打包的项目只能放在web服务器里面，用。如果要在本地运行，可以按照下面的步骤来实现。

vite/vue3打包后运行

岁月如歌去，十年弹指间

05-08

688

需要通过live-server 或者服务器运行。vite不支持本地双击运行。

vite打包vue3项目，可以用file://协议访问（可以在android、electron中直接访问）

Forever.Sun

09-15

1522

vue3作为国内主流开发框架，而vite又是vue团队推荐打包工具，在大多数的项目中都是部署在服务器上，通过http://协议访问ip、域名，但是在一些混合式开发如android或者electron中需要提供的html页面，然后使用file://协议访问。在这样的背景下就需要我们使用vite打包vue3项目支持file://协议访问。通过查找相关资料实现逻辑主要是打包后要支持非esmodule的...

【02Vue3 项目打包教程】Vue3 项目打包教程创建 Vue3 项目开发和构建项目查看打包结果

燃正科技

06-08

4129

vue项目本地开启https访问模式

不负光阴不负自己，不负被爱不负所爱

02-04

5716

在实际开发中，我们除了以http的形式进行页面访问，还会以https形式进行页面访问，但是根据vue-cli的版本不同，配置方式也有所差异，以下分别从vue-cli3.x、vue-cli4.x和vue-cli2.x构建的项目分别进行配置开启https

Vue项目打包以及本地服务器创建并部署项目

Alin_Wu_的博客

04-15

905

此时直接访问 localhost:5005 就可以看见用vue写的页面了（默认访问的是index.html）如果不显示页面，ctrl+c停止服务器并重新启动就可以了。在与server.js同级下创建一个static文件夹(一般是用static命名)，将打包好的dist下的文件复制到static文件夹下，修改server.js代码如下。路由的工作模式是hash，各种乱点再刷新是没问题的。1.用正则匹配判断哪些是前端路由，哪些是后端路由（没了解，不太懂）2.用npm的一个中间件。

vue3+ts+vite项目到指定访问路径

08-09

如果你想将Vue 3 + TypeScript + Vite项目部署到指定的访问路径，可以按照以下步骤进行配置： 1. 打开`vite.config.ts`文件。 2. 在`defineConfig`函数中添加一个`base`选项，指定你的访问路径。例如，如果你想将项目部署到`/myapp/`路径下，可以设置如下： ```typescript export default defineConfig({ base: '/myapp/', plugins: [vue()], }); ``` 3. 保存文件并重新运行项目。现在，你的项目将会在指定的访问路径下进行部署。请注意，如果你使用的是开发服务器（`npm run dev`），访问路径将会自动添加到本地开发服务器的URL中。对于生产环境打包（`npm run build`），你需要确保在部署时将项目放置在正确的路径下。希望这些步骤能够帮助到你！如果你还有其他问题，请继续提问。