Vite - 配置 - 多入口页面配置

vite.config.js

配置有多个入口的文件

/**
 * 测试配置多个入口文件的案例
 */

import { defineConfig} from "vite"
import path from "path"
export default defineConfig({
    build:{
        minify:false,
        rollupOptions:{
            // 配置多个入口文件
            input:{ 
                // 指定有多个入口html文件
                index: path.resolve(__dirname,"./index.html"),
                a: path.resolve(__dirname,"./src/a.html"),
                b: path.resolve(__dirname,"./src/b.html")
            },
          。。。。。。
        }
    }
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于使用 Vue3 和 Vite 进行多页面配置,你可以按照以下步骤进行操作: 1. 首先,确保你已经安装了 Vue CLI。如果没有安装,可以使用以下命令进行安装: ``` npm install -g @vue/cli ``` 2. 创建一个新的 Vue 项目,使用以下命令: ``` vue create my-project ``` 3. 在创建项目时,选择手动配置选项,然后选择你需要的特性。 4. 进入项目目录,并安装 Vite 作为开发服务器,使用以下命令: ``` cd my-project npm install vite --save-dev ``` 5. 在项目根目录下创建一个 `vite.config.js` 文件,并配置页面选项。示例如下: ```javascript // vite.config.js import { defineConfig } from 'vite'; export default defineConfig({ build: { rollupOptions: { input: { page1: 'src/page1/main.js', page2: 'src/page2/main.js', } } } }); ``` 上述配置中,我们使用 `rollupOptions.input` 来指定每个页面入口文件。 6. 在 `src` 目录下创建 `page1` 和 `page2` 文件夹,并分别在每个文件夹内创建一个 `main.js` 文件作为页面入口文件。 7. 在 `src/page1/main.js` 和 `src/page2/main.js` 中编写你的页面代码。 8. 在 `package.json` 文件中修改 `scripts` 部分,添加以下命令: ```json "scripts": { "dev": "vite", "build": "vite build" } ``` 9. 运行开发服务器,使用以下命令: ``` npm run dev ``` 10. 在浏览器中访问 `http://localhost:3000/page1` 和 `http://localhost:3000/page2`,分别查看你的多页面应用。 通过以上步骤,你就可以使用 Vue3 和 Vite 进行多页面配置了。每个页面都有自己的入口文件和独立的代码,并且可以在开发服务器中进行实时预览和调试。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值