小鱼儿心语：这个世界上最治愈的，不是任何其他的力量，而是越来越好的自己~~///(^v^)\~~🙂
基于vite构建vue3项目其实很简单，万事开头难嘛，最初遇到了各种报错，很让人头疼，想尽了一切办法，各种百度各种方法尝试解决，最终功夫不负有心人吧，终于搭建完成，接下来，就把我遇到的坑分享给大家，避免再次入坑！
以下都是我遇到的报错问题，大家避免入坑哦：
坑1.png
坑2.png
坑3.png
以上箭头指向的都是错误的命令，并且文件夹层级也是错误的，请大家注意避免~
进入主题之前我们先来了解一下webpack与vite的区别，为什么要使用vite构建vue项目呢？
- vite 官网 ：https://cn.vitejs.dev/
vite 有什么优势呢？- 开发环境中，无需打包操作，快速的冷启动
- 热重载（HMR） 更轻量，快 （局部刷新）
- 按需编译，不用再等待整个应用的编译
1、传统的构建相信用过 webpack 都知道，他是通过入口文件然后分析路由，再去分析模块，都分析完了进行打包，然后告诉你服务器准备好了
webpack.png
2、vite 构建的工作模式，一上来就给用户准备好服务器，然后等待用户请求，假如你发起了一个请求，然后 vite 会根据你的路径 进入 入口文件然后找到 你的路由，分析该路由的模块，然后给你 （动态的引入和代码分割）
vite.png
接下来我们一起走向的光明大道：
一、创建vite
- 这里需要注意的是，必须在
E:\vue3.0\vue3ts_components\node_modules\.bin路径下执行命令（不清楚的小伙伴可以看看我的上一篇文章：https://www.jianshu.com/p/a06c4425b635），否则会报错！
npm create vite
创建vite.png
安装好vite之后，原先的
node_modules文件夹下会生成一个@vitejs文件夹
@vitejs.png
二、创建基于vite的vue3项目
想要继续执行一下命令就需要进入这个路径下操作：
.bin.png
bin.png
create-vite vitevue3 (项目名称可以随意更改)
vitevue3创建.png
一定要选择vue，继续：
js.png
目前我们先不使用
ts开发,一步步来：
cd.png
三、启动项目
安装依赖成功后，启动项目
启动项目.png
此时，页面已经可以打开了，是这样子的：
页面.png
但是，大家可以看到，此时启动之后，显示“Network: use --host to expose”，无法访问，别着急，一下是解决方法：
产生原因：“Network: use --host to expose”提示使用host来进行暴露，即要将服务暴露成IP+端口号进行访问。
1、将package.json中的启动项中的dev和serve增加--host参数。
原代码：
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
修改后代码：
"scripts": {
"dev": "vite --host",
"build": "vite build",
"preview": "vite preview --host"
},
2、在vite.config.ts文件中增加server选项配置，server中配置host内容
原代码：
export default defineConfig({
plugins: [vue()],
server: {
hmr: true,
open: true, // 是否自动在浏览器打开
}
})
修改后代码：
export default defineConfig({
plugins: [vue()],
server: {
hmr: true,
host:'0.0.0.0', //此处为新增代码
open: true, // 是否自动在浏览器打开
}
})
再次启动后，会将本机的IP和端口号暴露出来，点击可访问.
VITE v4.1.4 ready in 426 ms
➜ Local: http://localhost:5175/
➜ Network: http://192.168.0.108:5175/
➜ press h to show help
网友评论