首页 > 其他分享 >vite多入口

vite多入口

时间:2023-10-31 21:56:03浏览次数:31  
标签:resolve vue 入口 js demo1 import vite

创建多页面入口

1.在根目录下创建 demo1.htm1,demo2.htm1这两个文件
2.在vite.config.js文件中配置入口
3.在src下创建文件夹和文件,src/demo1/app.vue和src/demo1/main.js

demo1.htm1

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 引入入口文件 -->
    <script type="module" src="/src/page/demo1/main.js"></script>
  </body>
</html>

vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 构建多入口
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'index.html'),
        demo1: resolve(__dirname, 'demo1.html'),
        demo2: resolve(__dirname, 'demo2.html')
      }
    }
  }
})
src/demo1/main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

标签:resolve,vue,入口,js,demo1,import,vite
From: https://www.cnblogs.com/IwishIcould/p/17654760.html

相关文章

  • vue3 + vite 的Excel表格的导入导出
    一、安装XLSX插件yarnaddxlsx或者npmixlsx二、引入插件在你需要的页面或者在main.js中引入import*asXLSXfrom'xlsx'三、导出Excel3.1核心api①xlsx.utils.book_new() 新建工作簿② xlsx.uti......
  • vite.config.js配置详解
    import{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue' exportdefaultdefineConfig({   //根路径,也就是项目的基础路径   base:'/',   //服务器配置   server:{       /......
  • VIte+Vue3 打包在本地 双击 index.html 打开项目
    npmi@vitejs/plugin-legacynpmi@babel/preset-envnpmiterserimportlegacyfrom'@vitejs/plugin-legacy';exportdefaultdefineConfig({base:"./",plugins:[vue(),legacy({targets:["defaults","not......
  • 问题:vue3 使用 vite 构建的项目打包后无法打开index.html文件,或者显示一片空白
    一、问题描述项目build之后,点击dist文件中的index.html文件,打开是空白,提示以下信息。二、产生原因及解决方法1.文件路径不对vite默认根目录"/",file://…访问需要基于index.html的路径,需要再vit.config.js中进行以下配置2.跨域问题vite构建打包后,默认启用ESModule,跨module......
  • vue3 vite 根据目录生成路由
    vite勾选vue-router搭建好项目后,routes部分示例代码为routes:[{path:'/',name:'home',component:HomeView},{path:'/about',name:'about',//routelevelcode-splitting......
  • 使用vite自动生成vue路由
    全新的路由组织方式以往编写路由都需要手动编写router.js代码,其实很多代码是重复的新的方案根据文件夹目录结构自动生成文件夹下的index.vue->/初始化项目构建npminitvue@latest运行npmrundev项目结构一个文件夹对应一个路由page.js用来填写配置信息exportdefault{ti......
  • vite中使用scss导出变量到js/ts中作为变量使用
    定义scss定义一个scss文件,注意,这里的文件名要以module.scss结尾,不然会出现读写错误的问题。$background-color_hover:#e4e8ec;$background-color_chosed:#f44343;:export{bgc_hover:$background-color_hover;bgc_chosed:$background-color_chosed;}.modu......
  • 关于Vite辨别当前环境
    Vite是一个现代化的前端构建工具,它提供了内置的环境变量来辨别当前环境是生产环境还是开发环境。在Vite中,可以通过检查import.meta.env对象来获取当前环境的信息。import.meta.env对象包含了一些常用的环境变量,其中最重要的是MODE变量。MODE变量表示当前的构建模式,可以......
  • Spring MVC入口Servlet详解(HttpServletBean,FrameworkServlet,DispatcherServlet )
    SpringMVC中DispatcherServlet前端控制器是web服务器的入口,那么它是怎么样进行初始化的,是怎么样进行工作?继承关系1.HttpServletBean主要做一些初始化的工作,将web.xml中配置的参数设置到Servlet中。比如servlet标签的子标签init-param标签中配置的参数。2.FrameworkServlet将Serv......
  • Python标准库的入口
    Python有一套很有用的标准库(standardlibrary)。标准库会随着Python解释器,一起安装在你的电脑中的。它是Python的一个组成部分。这些标准库是Python为你准备好的利器,可以让编程事半功倍。 我将根据我个人的使用经验中,挑选出标准库三个方面的包(package)介绍:Python增强系......