Vue3 + Vite 多入口配置

试了一下多入口跳转的问题:

import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import styleImport, {VantResolve} from "vite-plugin-style-import";

// https://vitejs.dev/config/
export default defineConfig({
    server: {
        open: true,
        port: 3005,
        host: "0.0.0.0",
    },
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src"),
        },
    },
    build: {
        emptyOutDir: true,
        rollupOptions: {
            input: {
                entry: path.resolve(__dirname, 'index.html'),
                privacy: path.resolve(__dirname, 'privacy.html'),
                terms: path.resolve(__dirname, 'terms.html'),
                refund: path.resolve(__dirname, 'refund.html'),
                about: path.resolve(__dirname, 'about.html'),
            }
        }
    },
    plugins: [
        vue(),
        styleImport({
            resolves: [VantResolve()],
        }),
    ],
});

其实就是多了个build

empty就是“是否清空输出目录”,默认也是true。

然后就会出现这样的报错:

[vite]: Rollup failed to resolve import "src/main.js" from "index.html".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "src/main.js" from "index.html".
This is most likely unintended because it can break your application at runtime.

npm ERR! land-page@0.0.0 build_local: `vite build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the land-page@0.0.0 build_local script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\admin\AppData\Roaming\npm-cache\_logs\2022-09-05T03_36_40_610Z-debug.log
 

<script type="module" src="src/main.js"></script>
改成
 <script type="module" src="./src/main.js"></script>

style引用的类似报错也按照这么处理即可

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值