Vue3 Vite 开发环境（vue3.0 vite）
Vue3 Vite 开发环境
参考：
https://cn.vuejs.org/
https://vitejs.cn/
1.单页面开发环境
在本地搭建 Vue 单页应用。创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件(SFC)。
确保你安装了最新版本的 Node.js，并且你的当前工作目录正是打算创建项目的目录。
执行如下命令：
npm create vue@latest这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：
Vue.js - The Progressive JavaScript Framework
√ 请输入项目名称： ... demo1
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ >> 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是
正在构建项目 D:\workspace_of_typescript\webdemo\demo1\demo1...
项目构建完成，可执行以下命令：
cd demo1
npm install
npm run format
npm run dev执行如下命令：
cd demo1
npm install
npm run format
npm run dev访问：http://localhost:5173/
2.配置服务器
打开 vite.config.ts 文件，在 export default defineConfig 中添加如下配置：
server: {
host: '0.0.0.0', // 指定服务器主机名
port: 8080, // 指定服务器端口
hmr: true, // 开启热更新
open: false, // 在服务器启动时自动在浏览器中打开应用程序
}配置 server.proxy 示例：
export default defineConfig({
server: {
proxy: {
// 字符串简写写法：http://localhost:5173/foo -> http://localhost:4567/foo
'/foo': 'http://localhost:4567',
// 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
// 正则表达式写法：http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
'^/fallback/.*': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/fallback/, ''),
},
// 使用 proxy 实例
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
configure: (proxy, options) => {
// proxy 是 'http-proxy' 的实例
}
},
// 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
'/socket.io': {
target: 'ws://localhost:5174',
ws: true,
},
},
},
})3.配置 TypeScript 编译
在如下文件中配置：
- tsconfig.app.json
- tsconfig.node.json
- tsconfig.vitest.json
在上面文件中的 compilerOptions 项中添加如下配置：
"allowJs": true4.多页面配置
1.把项目跟目录下面src目录的文件全部删除，删除项目根目录下的index.html。
2.在项目根目录下 src 创建 index 目录，在该目录中创建 index.vue 以及 index.ts 文件。内容如下：
index.vue
<template>
<div>Index页面</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>index.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './index.vue'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')3.在项目根目录下创建 index.html，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/index/index.ts"></script>
</body>
</html>4.在项目根目录下 src 创建 about 目录，在该目录中创建 about.vue 以及 about.ts 文件。内容如下：
about.vue
<template>
<div>About页面</div>
</template>
<script>
export default {
name: "about"
}
</script>
<style scoped>
</style>about.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './about.vue'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')5.在项目根目录下创建 about 子目录作为二级目录，并在该目录中创建 about.html，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/about/about.ts"></script>
</body>
</html>6.在 vite.config.ts 文件中配置多文件入口，内容如下：
import { resolve } from 'path'
build: {
rollupOptions: {
input: {
index: resolve(__dirname, 'index.html'),
about: resolve(__dirname, 'about/about.html'),
},
output: {
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: "static/js/[name]-[hash].js",
assetFileNames: "static/[ext]/name-[hash].[ext]"
}
},
}执行 npm run dev，在浏览器中访问：
http://localhost:8080/
http://localhost:8080/about/about.html执行 npm run build 生成的目录结构：
about
about.html
static
js
*.js
favicon.ico
index.html5.多页面开发中文件规则
1.一般情况下部署到生产环境的项目访问路径最多为三级。
2.二级目录或多级目录在项目根目录下创建，并在这些目录中创建 html 文件。
3.对应二级目录或多级目录在 src 目录下创建，建议目录路径保持一致，便于维护，该目录用于存放 vue 和 ts 文件。
4.在 src 目录下对应的目录中创建 vue 和 ts 文件，文件名建议与html文件名相同。
5.html、vue、ts 文件的内容参考上面的内容。