前端Vite项目构建过程-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_16992475/article/details/144477262

【前端开发-----NodeJS】nodejs快速入门教程，想要快速入门nodejs就看这一篇文章就够了，基础部分特详细，按要点整理知识点
 【前端开发----ES6++】前端开发之ES6（ECMAscript6）语法以及ES6++快速学习入门（前端必备了解知识）
【前端开发—Vue2】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
【前端开发—Vue3】前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！

【JavaScript超详细的学习笔记-上】JavaScrip超详细的学习笔记，共27部分，12多万字
 【JavaScript超详细的学习笔记-下】JavaScrip超详细的学习笔记，共27部分，12多万字，学习js不错的选择，内容超详细
 【前端开发—jQuery】想要快速入门JQuery？看这一篇文章就够了，笔记够详细，可以收藏学习。

【前端开发–css学习笔记】CSS超详细的学习笔记。前端开发css学习笔记（非常详细，适合小白入门）

下面演示了，如何一步一步的手动创建vite项目，而不使用脚手架模板；

1、nodejs的基础使用

Nodejs安装

中文文档：http://nodejs.cn/api/v16/index.html，下载地址：https://nodejs.cn/download/，
官方文档，下载地址：https://nodejs.org/en/download/package-manager

Nodejs

path模块

const path = require('node:path')
path.join(__dirname,  '/doc', 'index.html')
path.resolve(__dirname,  'doc', '../index.html')

fs模块

const path=require('node:path')
const fs = require('node:fs')

//判断文件是否存在
fs.existsSync(path.join(__dirname.'./index.html'))
//获取目标对象相关的文件信息
const stats =fs.statSync(path.join(__dirname.'./index.html'))
stats.isDirectory()
stats.isFile()
//向文件中追加内容
fs.appendFileSync(path.join(__dirname,'./index.html'),'追加的文本内容')
//向文件中写入内容
fs.writeFileSync(path.join(__dirname.'./index.html'),'写入的文本内容')
// 读取文件内容
const htmlBuff = fs.readFileSync(path.join(__dirname.'./index.html'))
console.log(htmlBuff.toString())
//读取文件夹
fs.readdirSync(path.join( dirname))
//创建文件夹
fs.mkdirSync('./temp')
//删除文件和目录
fs.rmSync('./temp')

http模块

const http = require('node:http')
const server = http.createServer()
server.on('request'，(request, res)=>{
	res.writeHead(200,{'ContentType''application/json'})
	res.end(JSoN.stringify({
		data:'Hello World!'
	}))
})
server.listen(8000.()=>(
	console.log('server started')
})

2、npm高级用法

官方仓库：https://www.npmjs.com/

#项目初始化
npm init
#安装全部依赖
npm install
#安装指定的包
npm install vue
#安装指定版本的包
npm install vue@3.0.0
#安装到dev
npm install vite -D
#查看包的版本
npm view vue versions
# 运行脚本
npm run dev
# 查看镜像源
npm config get registry
# 设置镜像源
npm config set registry https://registry.npmmirror.com

项目构建脚本

// script/build.js
const child_process = require('child_process')

const args =process.argv.slice(2)

const webProcess =child_process.exec(`vite build --outDir=dist`)
webProcess.stdout.on('data',console.1og)
webProcess.stderr.on('data',console.error)
webProcess.on('close',()=>{})

监听sass脚本

const child_process =require('child_process')
child_process.exec('sass --watch ./styles')

3、使用vite搭建前端项目

初始化项目

npm init

在这里插入图片描述

安装Vite

官方文档：https://cn.vitejs.dev/

# vite
npm install vite -D

在这里插入图片描述

手动在package.json中加上这条vite命令，然后使用 npm run dev，就可以起来1个服务了，不过现在还访问不了

在这里插入图片描述

Vite配置

vite.config.js

创建vite.config.js，通过配置，定制node服务。

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path'

export default defineConfig(( {command, mode, isSsrBuild, isPreview} ) =>{
	
	if(command === 'server') {
		console.log('is serve')
	} else {
		console.log('is build')
	}

	return {
		resolve: {
			//导入时想要省略的扩展名列表
			extensions: ['.js','.vue', '.json'],
			// 指定文件引用别名
			alias: {
				'@': path.resolve(__dirname, 'src')
			}
		},
		// 项目构建配置
		build: {},
		// 开发服务配置
		server: {
			// 服务启动自动打开默认浏览器访问页面
			open: true,
			port: 8000,
			//允许局域网通过ip访问开发服务
			host: '0.0.0.0',
			// 代理服务器配置
			proxy: {}
		}
	}

})

package.json添加npm命令

// package.json
{
	"scripts" : {
		"dev": "vite",            // 启动开发服务器，别名：vite dev, vite server
		"build": "vite build",    // 为生产环境构建产物
		"preview": "vite preview" // 本地预览生产构建产物
	}
}

此时，使用npm run dev，会启动1个监听8000端口的web服务。但是，目前还访问不了到内容。

jsconfig.json配置路径别名

// jsconfig.json
{
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"@/*": ["src/*"]
		}
	}
}

创建index.html

创建index.html，并引入src/main.js（该文件目前为空）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    viteeeeeeeeee~
    <div id="app"></div>
</body>
<script src="/src/main.js" type="module"></script>
</html>

在这里插入图片描述
此时，执行npm run dev，即可看到内容了。

所以，使用vite就能够返回index.html的内容，并且在index.html中引入了/src/main.js。

但是，目前还没有用到vue，main.js也没有引入其它的模块。

4、在vite项目中集成vue

安装vue3

官方文档：https://cn.vuejs.org/

npm install vue@3

安装并配置@vitejs/plugin-vue插件

安装@vitejs/plugin-vue插件，让node具备处理.vue文件的能力，但是要安装对应版本，否则安装时会报错。（后面配置vite时会用到该插件）

npm install @vitejs/plugin-vue@4

并配置该插件到vite.config.js中

在这里插入图片描述

修改main.js，并引入App.vue

在main.js中引入vue，并且引入App.vue

// main.js
console.log('main.js')
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

<!-- App.vue -->
<template>
    <div>
        halo vue again~
    </div>
</template>

<script setup></script>

<style lang="scss"></style>

运行npm run dev

此时，npm run dev，可以看到App.vue中的内容了

（index.html中引入了main.js）
在这里插入图片描述
（main.js中引入了App.vue）

（App.vue会被插件处理成1个js模块，如果不安装@vitejs/plugin-vue插件，则vue文件不能被正确处理）

main.js中引入css文件&js文件

在这里插入图片描述
运行npm run dev，查看效果

总结

原来浏览器能够识别出import和export语法的js。nodejs能够起来1个服务支撑返回静态资源，解析处理vue文件；

0、node提供了js的运行环境, 因此可以脱离浏览器而执行js代码
1、node能够操作服务器
2、node能够读取文件，处理文件
3、node能够启动1个服务器
4、npm是node的1个包管理器
5、使用npm可以安装vite这个包，安装的vite到node_modules之后, vite这个包里面有bin目录下有js文件, 因此可以使用vite命令了
6、vite命令可以调用node的模块功能
7、vite读取项目下的vite.config.js启动1个服务器, 并读取项目下的index.html, 给浏览器返回index.html
8、index.html中引入了main.js, 而浏览器能够识别其中的import/export语法, 因此能够处理js模块依赖关系
9、安装@vitejs/plugin-vue插件使得node, 可以处理vue文件、css, 并将这些内容都处理成js模块
10、vite使用了node启动了服务, 并且使用了node的功能处理各种文件成js模块, 整个应用就起来了
11、借用了node之后, 可以将模块依赖关系全部处理成静态文件, 也就是打包 
12、上面是安装vite这些可以执行的命令的包, 还有些比如element-ui之类的包, 它们也是通过js的语法将功能暴露出去, 然后被引入使用, 只要是遵循js模块语法, 都能被处理。
13、因此所有的打包操作和运行操作其实都是node在驱动

5、vite配置路由

安装vue-router

官方文档https://router.vuejs.org/zh/

npm install vue-router

router.js

// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Layout',
    component: Layout,
    children: [
	  {
	    path: 'home/index',
	    component: () => import('../views/home/index.vue'),
	    meta: { title: '首页' }
	  },
    ]
  },
  {
    path: '/login',
    component: () => import('../views/login/index.vue'),
    meta: { title: '登录' }
  },
  {
    path: '/:pathMatch(.*)*',
    component: () => import('../views/error/404/index.vue'),
    meta: { title: '404' }
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

// 路由导航守卫
router.beforeEach((to, from) => {
	return true
})

export function setup(app) {
  app.use(router)
}

main.js

// main.js
import { createApp } from 'vue'
import App from './App.vue'
imoprt { setup as setupRouter } from '@/router/index.js'

const app = createApp(App)
setupRouter(app)
app.mount('#app')

6、Vite环境变量

.env

# .env
VITE_TITLE = 'Vite demo'

VITE_BASE_API = '/api'

VITE_APP_VERSIOIN = '1.0.0'

VITE_LOGO = ''

.env.development

# .env.development
VITE_ENV = 'development'

VITE_BASE_URL = 'http://127.0.0.1:8080'

.env.test

# .env.test
VITE_ENV = 'test'

VITE_BASE_URL = 'http://127.0.0.1:8081'

.env.production

# .env.production
VITE_ENV = 'production'

VITE_BASE_URL = 'https://example.com'

vite.config.js使用环境变量

// vite.config.js使用环境变量
import { defineConfig, loadEnv } from 'vue'

defineConfig(({mode}) => {
	const env = loadEnv(mode, process.cwd())
})

内置默认环境变量

// 内置默认环境变量
import.meta.env.MODE
import.meta.env.PROD // 是否是build打包
import.meta.env.DEV // 是否是server本地启动

// 判断开发环境
const isDev = import.meta.env.MODE === 'development'
if(isDEV) {
	console.log('dev执行的代码')
}else {
	console.log('==')
}

// 使用自定义环境变量
import.meta.env.VITE_ENV
import.meta.env.VITE_TITLE

html中使用变量

<!-- html中使用变量 -->
<html>
	<head>
		<title>%VITE_TITLE%</title>
	</head>
	<body></body>
</html>

前端Vite项目构建过程

文章目录

1、nodejs的基础使用

Nodejs安装

Nodejs

path模块

fs模块

http模块

2、npm高级用法

项目构建脚本

监听sass脚本

3、使用vite搭建前端项目

初始化项目

安装Vite

Vite配置

vite.config.js

package.json添加npm命令

jsconfig.json配置路径别名

创建index.html

4、在vite项目中集成vue

安装vue3

安装并配置@vitejs/plugin-vue插件

修改main.js，并引入App.vue

运行npm run dev

main.js中引入css文件&js文件

总结

5、vite配置路由

安装vue-router

router.js

main.js

6、Vite环境变量

.env

.env.development

.env.test

.env.production

vite.config.js使用环境变量

内置默认环境变量

html中使用变量