# vite-vue3-multipage

**Repository Path**: cheere/vite-vue3-multipage

## Basic Information

- **Project Name**: vite-vue3-multipage
- **Description**: Vite + Vue3 - 多页面应用 。 使用前 注意，需要最新Node.js > `12.x` 和 gcc 在各个平台的最低兼容版本。避免服务器打包 因为版本过低失败。如果不满足 使用 vue-cli + Vue3。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: http://srxboys.cn/other/vite-vue3-multipage/
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2022-01-17
- **Last Updated**: 2025-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, vite, Vue

## README

# vite-vue3-multipage

Vite + Vue3 配置多页面应用

使用前 注意，需要最新`Node.js` > `12.x` 和 `gcc` 在各个平台的最低兼容版本。<br>
避免服务器打包 因为版本过低失败。如果不满足 使用 `vue-cli` + `Vue3`。

- [Vite](https://www.vitejs.net/)
- [Vue3](https://v3.cn.vuejs.org/)

> 框架包含新特性(也可以不用)
- router
- directive
- plugin
- setup
- ref

<br>


[我的 vue3 学习代码](https://gitee.com/srxboys/learn-vue3.x)

着重说明：[多个环境 - [import] 的文件不同](/#4多个环境import的文件不同) 在看 另一个 Git分支: [vite-import](https://gitee.com/cheere/vite-vue3-multipage/tree/feature%2Fvite-import/)

## VSCode 插件
- Vue3.x -> [volar](https://github.com/johnsoncodehk/volar)

```sh
# 安装
npm init vite@latest vite-vue3-multipage  --template vue

# dev
npm run dev

# build - production
npm run build

```

# 总结

目前都是我个人开发项目需要框架，额外配置。<br>
如有其他 需要，请 [issue](https://gitee.com/cheere/vite-vue3-multipage/issues)

## 1、静态图片 `<img src="">` - [官方文档](https://www.vitejs.net/guide/assets.html#new-url-url-import-meta-url)
开发环境(development / npm run dev)下,  显示失败<br>
`解决`:
1. `<img src="~/../assets/logo.png">`
1. 采用 `/src/utils/img-url` -> `import.meta.url`

## 2、静态多目录 - 跳转问题
查看 `/src/pages/App.vue` -> `onPush()` <br>
`开发环境` -> 必须是绝对路径  `/xx/index.html` &nbsp;&nbsp; 可能我对 `vite` 不了解吧 <br>
`正式环境` -> 可以 `/xx`

## 3、html中动态添加 `开发/测试` 文件(js/json等等)
vite.config.js -> `PluginTagsTransform`

## 4、多个环境，`import`的文件不同
可能不是很常见，在看 另一个 Git分支: [vite-import](https://gitee.com/cheere/vite-vue3-multipage/tree/feature%2Fvite-import/) <br>
例如: import '@/utils/get-version' <br>
- `开发环境`： 实际导入目录 -> '@/utils/get-version.dev.js'
- `测试环境`： 实际导入目录 -> '@/utils/get-version.test.js'
- `正式环境`： 实际导入目录 -> '@/utils/get-version.prod.js'

## 5、页面动态刷新
动态刷新页面 - `重新打包上线后，资源文件变量，浏览器走缓存时，要刷新`<br>
- 页面入口程序:  -> `import getVersion from '@/utils/reload.js'`
- public -> `v/version`

## 6、线上(production)环境，打包html中添加 百度统计
`html -> head -> script` : `百度统计`
- `配置`: vite.config.js -> `PluginTagsTransform`
- `使用`: `/src/utils/baiduVitals` -> 自封装的工具

# 参考
- [vite 多页面配置](https://blog.csdn.net/qq_42825870/article/details/120727928)
- [vite 多页面配置 后如何使用 router](https://blog.csdn.net/qq_42825870/article/details/120749062)
- [vue的vite项目配置eslint没有效果？](https://segmentfault.com/q/1010000037450179)