在Vue 3 项目中使用 Vite 进行打包配置,可以遵循以下步骤来确保你的项目能够顺利打包并部署: 1. 安装并配置 Vue 3 和 Vite 首先,你需要确保已经安装了 Node.js 和 npm(或 yarn)。然后,你可以使用以下命令来创建一个新的 Vue 3 项目并配置 Vite: bash npm create vite@latest 按照提示选择 Vue 模板,并输...
一、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",// 将目录设定为静态资源...
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...
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...
运行npm run build,然后发现打包的文件打包到了src里,这边需要再修改一个build.outDir属性 outDir:path.resolve(__dirname,"") 再对配置代码进行一点修改,附上完整代码 import{fileURLToPath,URL}from"node:url";import{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";importvueJsxfrom"@vitejs...
1 将打包后文件的路径由绝对路径修改为相对路径，需要修改vite.config.js文件，添加base设置，值为”./ ”，如下图所示：2 同时修改根目录下的index.html文件，将link和script标签中的路径前面加上. ，如下图所示：3 使用打包命令 npm run build，如下图所示：4 确保CentOS服务器上已经安装Nginx，如下图所示...
一、Svg配置 每次引入一张SVG图片都需要写一次相对路径,并且对SVG图片进行压缩优化也不够方便。 vite-svg-loader插件加载SVG文件作为Vue组件,使用SVGO进行优化。 插件网站https://www.npmjs.com/package/vite-svg-loader 1. 安装 pnpm i vite-svg-loader-D ...
准备打包环境 Node.js 安装配置 | 菜鸟教程 (runoob.com) 我们使用 Vite 进行打包,您需要提前安装 node 环境, 创建环境 使用VS Code 打开我们的vue-spa文件夹,通过Ctrl+~ 打开终端,输入以下命令创建 Vue 3 项目 npm create vite@latest vites ---template vue 稍...
方案一:打包成一个文件 step1:安装vite-plugin-singlefile npm i vite-plugin-singlefile step2:配置@vite-plugin-singlefile相关内容,在vite.config.ts(js)中修改 import{ defineConfig }from'vite';importvuefrom'@vitejs/plugin-vue';importAutoImportfrom'unplugin-auto-import/vite';importComponentsfrom'unplugin...