在Vue 3 项目中使用 Vite 进行打包配置,可以遵循以下步骤来确保你的项目能够顺利打包并部署: 1. 安装并配置 Vue 3 和 Vite 首先,你需要确保已经安装了 Node.js 和 npm(或 yarn)。然后,你可以使用以下命令来创建一个新的 Vue 3 项目并配置 Vite: bash npm create vite@latest 按照提示选择 Vue 模板,并输...
import{ defineConfig }from"vite";importvuefrom"@vitejs/plugin-vue";exportdefaultdefineConfig({build: {//打包文件目录outDir:"es",//压缩//minify: false,rollupOptions: {//忽略打包vue文件external: ["vue"],input: ["index.ts"],output: [ {//打包格式format:"es",//打包后文件名entryFileNames...
import {createHtmlPlugin} from'vite-plugin-html' const htmlParams = { minify:true, pages: [ { filename:'index', // filename 默认是template文件名,就是index.html entry:'/src/main.ts', template:'index.html', } ] } exportdefault defineConfig({ base:'./', // 方便打包后预览 publicDir...
一、 使用Vite创建Vue3项目 1.全局安装vite，使用命令npm install vite -g 2.创建vue3项目，使用命令 npm create vite@latest ,确认项目名 称，选择Vue及TypeScript 3. 使用用vscode打开项目，运行命令 npm install npm run dev 4.整个项目目录结构如下：5.访问页面 二、将打包项目发布到Nginx 1.将打包后...
使用vite创建, 选择vue pnpm create vite 2. 项目结构 image.png 3. 编写代码 核心是main.js, 组件就用默认的HelloWorld.vue import{createApp}from'vue'importAppfrom'./components/HelloWorld.vue'functionrenderVueComponentToDOM(domElement){createApp(App).mount(domElement)}exportdefaultrenderVueComponentToDOM...
本篇主要做的是js、css、vue组件、ts类的声明的打包配置 采用gulp来控制打包流程,采用rollup打包、借鉴elementPlus官网 执行命令全局安装gulp脚手架 npm install --global gulp-cli 复制代码 在根目录下安装 gulp @types/gulp sucrase pnpm install gulp @types/gulp sucrase -w -D 复制代码 在根目录新建 build...
自vite和vue3发布后,我就用他们作为主要的vue开发模式,但是今天需要把以前写的vue3的内容嵌套到一个自己编译的安卓webview中,但是去这个webview中集成esmodule是一件很麻烦的事情,所以我需要使用vite把vue3打包成非esmodule的方式,去让file协议能正常加载。
二、打包分析 官网https://www.npmjs.com/package/rollup-plugin-visualizer 1. 安装 pnpm i rollup-plugin-visualizer-D 1. 2.vite.config.ts配置 import{visualizer}from'rollup-plugin-visualizer'// https://vitejs.dev/config/exportdefaultdefineConfig({// ...plugins:[// ...visualizer({open:true,/...
简介:使用Vite和Vue3构建支持共享组件和分模块独立打包的前端项目的方法。 前言 最近有个需求就是构建一个可复用公共组件、可分模块独立部署的前端项目。关于这个共享开发和分模块打包的操作,还记得是在上家公司的某个SpringBoot项目上见过。它的好处就是子模块各自独立开发与打包、可复用父模块的共享代码、降低耦合度...