在Vue 3 项目中使用 Vite 进行打包配置,可以遵循以下步骤来确保你的项目能够顺利打包并部署: 1. 安装并配置 Vue 3 和 Vite 首先,你需要确保已经安装了 Node.js 和 npm(或 yarn)。然后,你可以使用以下命令来创建一个新的 Vue 3 项目并配置 Vite: bash npm create vite@latest 按照提示选择 Vue 模板,并输...
npm i vite-plugin-html -D #vite.config.ts import {defineConfig} from"vite" import vue from'@vitejs/plugin-vue' import {createHtmlPlugin} from'vite-plugin-html' const htmlParams = { minify:true, pages: [ { filename:'index', // filename 默认是template文件名,就是index.html entry:'/s...
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...
一、vite.config.js 常见配置项 import{fileURLToPath,URL}from"node:url";import{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";importqiankunfrom"vite-plugin-qiankun";exportdefaultdefineConfig({// 开发或生产环境服务的公共基础路径base:"/subapp/sub-vue3-vite",// 将目录设定为静态资源...
使用vite构建Vue3组件库,发布npm包 在国内用vue框架开发的是非常之多的,使用vue开发组件封装是一个很普片的事情了,封装好一个组件可以在项目的任意地方去使用,我们还可以从npm仓库下载别人封装的组件进行使用,比如element-ui,vant等组件库,但是由于不同的公司,不同的网站风格,是我们在开发中还是得自己封装自己的组...
3. vite打包配置 因为是需要单独的当作sdk库使用, 所以需要把组件的css打包到js中 所以需要安装vite插件vite-plugin-css-injected-by-js pnpm add vite-plugin-css-injected-by-js -D 配置vite.config.js import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importcssInjectedByJsPluginfrom'vite-pl...
一、Svg配置 每次引入一张SVG图片都需要写一次相对路径,并且对SVG图片进行压缩优化也不够方便。 vite-svg-loader插件加载SVG文件作为Vue组件,使用SVGO进行优化。 插件网站https://www.npmjs.com/package/vite-svg-loader 1. 安装 pnpm i vite-svg-loader-D ...
1 将打包后文件的路径由绝对路径修改为相对路径，需要修改vite.config.js文件，添加base设置，值为”./ ”，如下图所示：2 同时修改根目录下的index.html文件，将link和script标签中的路径前面加上. ，如下图所示：3 使用打包命令 npm run build，如下图所示：4 确保CentOS服务器上已经安装Nginx，如下图所示...
// https://vitejs.dev/config/ export default defineConfig({ base: './', // 生产环境下的公共路径 server: { // 是否开启 HTTPS // https: false, // 默认是 localhost。设置 host: true 或 host: "0.0.0.0",处于同一网络环境下的其他设备,可通过 Network 的地址形式,以 IP 访问项目 ...