【vite+vue3】 多页面应用模式
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
需要注意到的点:
1. 项目文件结构
2. vite.config.js 的配置
3. 访问地址的路径
假设你有下面这样的项目文件结构
├── package.json
├── vite.config.js
├── index.html
├── main.ts
└── src
├── project
|————projectA
|————api
|————router
|————views
|————index.html
|————main.ts
|————app.vue
|————projectB
|————api
|————router
|————views
|————index.html
|————main.ts
|————app.vue
└── views
在开发过程中,简单地导航或链接到 src/project/projectA/index.html
- 将会按预期工作,与正常的静态文件服务器表现一致。
vite.config.js 文件如下:
// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'
// 当前执行node命令时文件夹的地址(工作目录)
const root = process.cwd()
export default defineConfig({
base: './',
root: root,
build: {
target: 'modules',
minify: 'terser',
outDir: env.VITE_OUT_DIR || 'dist',
assetsDir: 'static', //指定生成静态文件目录
rollupOptions: { // 配置多页面应用模式
input: {
input: {
portalProject: path.resolve(__dirname, 'src/project/portalProject/index.html'),
riskProject: path.resolve(__dirname, 'src/project/riskProject/index.html'),
}
},
output: { // build 输出
entryFileNames: 'static/js/[name]-[hash].js',
chunkFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/name-[hash].[ext]',
}
},
},
})
如果你指定了另一个根目录,请记住,在解析输入路径时,__dirname
的值将仍然是 vite.config.js 文件所在的目录。因此,你需要把对应入口文件的 root
的路径添加到 resolve
的参数中。
在package.json中打包或者启动命令如下:
npm run dev 即可。
访问地址变为localhost/src/project/portalProject/index.html
localhost/src/project/riskProject/index.html
当执行npm run build 时生成的目录如下:
注意⚠️在运维部署时,访问该html,需要多写点路径才能正常访问
GitHub 加速计划 / vu / vue
83
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 3 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)