如何通过vite2和vue3构建多页面应用? [英] How to build a multi pages application by vite2 and vue3?
问题描述
我通过如下更改 vue.config.js
使用 Vue CLI 和 Vue 2 构建了一个多页面应用程序:
I built a multi-page app with Vue CLI and Vue 2 by changing vue.config.js
like below:
pages: {
index: {
entry: './src/pages/index/main.js',
template: 'public/index.html',
title: 'index page',
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
admin: {
entry: './src/pages/admin/main.js',
template: 'public/index.html',
title: 'admin page',
chunks: ['chunk-vendors', 'chunk-common', 'admin']
}
},
...
但是如何使用 Vite 和 Vue 3 构建多页应用程序?
But how do I build a multi-page app with Vite and Vue 3?
这是我的目录结构.我像这样编辑了 vite.config.js:
This is my Directory Structure. I edited the vite.config.js like this:
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')
/**
* @type {import('vite').UserConfig}
*/
export default {
plugins: [vue()],
build:{
rollupOptions:{
input:{
main:resolve(__dirname,'index.html'),
admin:resolve(__dirname,'src/admin/index.html')
}
}
}
}
但是当我构建时它返回错误并且我无法通过 localhost:3000/admin/index.html 打开管理页面.
But it returns errors when i build and i counld not open the admin page by localhost:3000/admin/index.html.
推荐答案
您可以为每个入口点创建两个单独的 index.html
.例如,
导入
,而嵌套的
导入
.
You could create two separate index.html
for each entry point. For example, <projectRoot>/index.html
imports <projectRoot>/main.js
, while a nested <projectRoot>/admin/index.html
imports <projectRoot>/admin/main.js
.
考虑以下目录结构:
|-package.json
|-vite.config.js
|-index.html
|-main.js
|-admin/
|---index.html
|---main.js
您将使用此配置创建多页应用一个>:
// vite.config.js
const { resolve } = require('path')
module.exports = {
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
admin: resolve(__dirname, 'admin/index.html')
}
}
}
}
这篇关于如何通过vite2和vue3构建多页面应用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!