vue/vite项目 打包后本地快速启动

最新推荐文章于 2024-08-08 15:22:23 发布
最新推荐文章于 2024-08-08 15:22:23 发布
阅读量1k 收藏 5
点赞数
分类专栏： 功能配置 搭建项目 文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/young_sam/article/details/126174506
版权
这篇博客介绍了如何安装全局Node.js服务模块`serve`，通过`npm install -g serve`命令进行安装，然后使用`serve -s dist`启动服务。在项目打包后，可以按照这个流程来启动服务，确保内容的正常展示。
摘要由CSDN通过智能技术生成

安装服务全局模块

先安装 npm install -g serve 服务
再输入 serve -s dist 启动

打包后

在这里插入图片描述

启动

在这里插入图片描述

Sam young
关注
专栏目录
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
用vite 打包之后项目不能在本地查看
Hermia_yuan的博客
06-25 372
用vite 打包之后项目不能在本地查看
创建Vue3项目(vue-cli，vite，create-vue)
最新发布
umin_的博客
08-08 992
记录一下vue3搭建项目的几种方法（vue-cli，vite，create-vue）更推荐vite安装，如果几种方法都尝试过的小伙伴应该会发现vite安装更加的快速推荐pnpm和yarn包管理器，安装速度杠杠的，可以学习一下。
vite项目如何在本地启动https协议
Mr__proto__的博客
07-01 744
vite项目如何在本地启动https协议并且不校验ssl证书
vite 打包完如何在本地运行
weixin_38655844的博客
07-20 1622
先安装npminstall-gserve服务。再输入serve-sdist启动。
Vite 打包后需要启动服务
weixin_42157672的博客
06-06 636
vite 打包后需要启动服务访问
vue3+vite创建项目-（傻瓜式教程）
01-19
完成开发后，可以使用Vite的生产构建命令打包项目： ```bash npm run build ``` 这会在项目的`dist`目录下生成用于部署的静态文件。 总结，Vue3 + Vite 的组合提供了现代前端开发的强大工具链。Vue3的新特性如...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
标题和描述中提到的核心知识点是如何使用Vue CLI打包后的项目在本地环境中运行。Vue CLI是Vue.js的官方命令行工具，它简化了Vue.js项目的创建和开发过程。打包是开发周期中的一个关键步骤，通常是将源代码转换为生产...
解决Vue 项目打包后favicon无法正常显示的问题
12-07
然而，这种配置在项目启动或打包后往往无法生效。 Vue项目经过webpack打包后，文件结构会发生变化。主要有两种情况：一是图片可能被打包到各种js、css文件中，这使得直接引用图片路径变得困难；二是图片被复制到...
vite+vue2的项目基础包
06-17
Vite是Vue.js官方推出的一款现代化的前端构建工具，它采用...只需简单几步，即可在本地启动一个功能完备的Vue2项目，非常适合快速原型设计或者教学演示。同时，这也体现了现代前端开发中模块化、自动化和工具化的趋势。
Vite项目启动都做了什么？
梅花寺
01-16 2251
主要了解了下关于 vite 启动过程中，文件处理、热更新的执行过程，源代码中有很多细节处理，有兴趣可以去深入研究一下，在此过程中，了解了一些 npm 包及其作用，如cacpicocolorschokidar等，以及http缓存的应用，还有发现源码中会有很多map、set数据结构的使用，包括数据增、删、改、是否存在等，带着问题继续探索。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
vite构建包本地启动
Java小白白的博客
05-10 559
在本地启动 Vite 前端项目并进行开发服务器部署需要安装一些 npm 包。这是用于在开发过程中实时预览项目的服务器。目录启动一个静态文件服务器，通常在。这会启动一个开发服务器，通常在。替换为你实际的项目目录。
将已有项目设置为vite启动，提高开发速度
EmotionComputer
06-05 4060
vite
如何快速开始一个vue的项目
wzp20092009的博客
11-16 1130
** 我们开发vue的项目首先要先安装node ** 1.node.js 为了更好的管理node.js的版本，我们可以使用nvm来安装node 如果已经安装了node，可以先卸载了避免麻烦 安装包地址https://github.com/coreybutler/nvm-windows/releases ，选择nvm-setup.zip下载后安装 当然，也可以安装最新版的nvm 安装的时候去d盘安......
Vite - 开发初体验，以及按需导入配置
CYK_byte的博客
06-09 2994
a）这里我们只需要在 vite.config.js 文件中引入 elementPlus 的解析器，然后把她交给 Components 按需引入插件即可.之后就可以观察到项目中多出了 node_modules 文件（这个文件中存放的就是下载好的依赖），然后通过 npm run dev 就可以成功了。c）接下来你会发现，在 Home.vue 组件中使用 Foo.vue 组件，就可以不用写 import 了~a）例如我们在 Home.vue 文件中使用 ref 写了一个计数器（点击按钮，count++）.
vite 打包部署出现的问题
记录技术的小本本
11-17 1090
部文件打包之后大小超过500KiB，项目部署之后页面默认跳转至根目录，或者js、css文件获取的路径为根目录，项目部署之后页面刷新导致页面404
Vite基本使用
热门推荐
m0_66711291的博客
05-28 1万+
文章目录什么是vite创建项目1. 输入2. 安装vite3. 配置项目的基本信息4. 预览效果配置项目配置项配置vue.config.jsvue-routervuexaxiosless 什么是vite vite是vue官方推出的一个打包工具，打包速度比webpack要快得多，具体为什么快我看不懂。 总之就是一个打包工具，也可以代替脚手架来创建项目 创建项目 按照下面的命令可以创建出一个项目 1. 输入 npm init vite@latest 或者 npm create vite@latest 2
（01）vite 从启动服务器开始
秋来九月八
11-21 693
Vite（发音为"veet"）是一种现代化的前端构建工具，旨在提供快速的开发体验。它由尤雨溪（Vue.js 的创始人）团队开发并维护。Vite主要用于构建基于现代 JavaScript 框架（如Vue.js、React、以及Svelte等）的应用程序。与传统的前端构建工具不同，Vite采用了一种基于ESM（ECMAScript模块）的开发服务器，利用浏览器原生支持的模块导入方式，实现了快速的冷启动和开发服务器启动的速度。
vue3 - 完美解决 vite 打包后在本地浏览器直接打开运行
01-14
Vue3和Vite是一对非常搭配的技术组合。Vite是一个基于ESM（即原生 ECMAScript 模块）的开发服务器，同时也是一个构建工具。它利用了浏览器的原生模块系统，不再需要打包，从而使得开发过程更加快速和高效。 Vue3作为Vite的官方支持框架，能够非常完美地结合在一起。在使用Vite进行开发后，如果需要在本地浏览器中直接打开运行，只需要简单的几个步骤即可实现。 首先，确保安装了最新版本的Vue CLI和Vite。然后，在项目根目录下使用命令行工具运行"npm run build"，这将生成打包后的文件。接着，使用命令行进入打包后的文件夹，并启动一个本地服务器，比如使用Python的SimpleHTTPServer。最后，在浏览器中访问本地服务器的地址，即可直接运行打包后的项目。 总的来说，Vue3和Vite的结合可以让开发变得更加简单和快速，并且能够很好地解决在本地浏览器中直接打开运行的问题。通过遵循一些简单的步骤，开发者可以快速地将项目部署到本地环境中进行测试和调试，极大地提高了开发效率。Vue3和Vite的强大功能让前端开发变得更加便捷和舒适。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值