Vite项目打包配置详解
一:vite构建项目 配置base
1、base配置打包公共路径
打开package.json
做项目时可以不去掉
好了,在以上你构建了vite,并配置了最简单的操作后,你准备配置vite.confing.ts
开发环境下我们的图片位置在/src,ok,本地没问题正常显示,你打了个包 (npm run build),然后又运行了npm脚本preview,
也没问题,但是在一些服务器上,使用绝对目录会导致404,所以我们需要配置为相对目录
二:路径别名
- 先引入path,在配置, 注意一定不要随意命名,a b c这样的,项目的目录也不能为关键字保留字!!
resolve.alias¶
- 类型:
Record<string, string> | Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>
将会被传递到 @rollup/plugin-alias
作为 entries 的选项。也可以是一个对象,或一个 { find, replacement, customResolver }
的数组。
当使用文件系统路径的别名时,请始终使用绝对路径。相对路径的别名值会原封不动地被使用,因此无法被正常解析。
更高级的自定义解析方法可以通过 插件 实现。
在 SSR 中使用
如果你已经为 SSR 外部化的依赖 配置了别名,你可能想要为真实的 node_modules
包配别名. Yarn 和 pnpm 都支持通过 npm:
前缀配置别名。
import { resolve } from "path"; resolve: {
alias: {
"@": resolve(__dirname, "src"),
// 注意一定不要随意命名,a b c这样的,项目的目录也不能为关键字保留字!!
"comp": resolve(__dirname, "src/components"),
// 配置图片要这样引用
"/img": "./src/assets",
},
},
三:生产环境移除log + 跨域
.生产环境时移除console.log的配置
生产环境不允许出现调试代码
官网-构建选项中
drop_console
(默认值:) -- 传递以放弃对函数的调用。如果您希望删除特定的函数调用 例如和/或保留函数参数的副作用 删除函数调用后,请改用。false
true
console.*
console.info
pure_funcs
drop_debugger
(默认值:) -- 删除语句true
debugger;
build: {
minify: 'terser', // 必须启用:terserOptions配置才会有效
terserOptions: {
compress: {
// 生产环境时移除console.log调试代码
drop_console:true,
drop_debugger: true,
}
}
},
vite.config.ts 完整代码:
import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import vue from "@vitejs/plugin-vue";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import path from "path"; export default defineConfig({
plugins: [
vue(),
//引入vue 插件
AutoImport({
imports: ["vue"],
dts: "src/auto-import.d.ts",
}),
//plus按需引入
AutoImport({
resolvers: [ElementPlusResolver()],
}),
//plus按需引入
Components({
resolvers: [ElementPlusResolver()],
}),
],
build: {
minify: "terser", // 必须开启:使用terserOptions才有效果
terserOptions: {
compress: {
//生产环境时移除console
drop_console: true,
drop_debugger: true,
},
},
}, resolve: {
//配置根路径别名: import('@/pages/login/login.vue')
alias: {
"@": path.resolve(__dirname, "src"),
// 注意一定不要随意命名,a b c这样的,项目的目录也不能为关键字保留字!!
"comp": resolve(__dirname, "src/components"),
// 配置图片要这样引用
"/img": "./src/assets",
},
},
// 跨域
server: {
//使用IP能访问
host: "0.0.0.0",
// 热更新
hmr: true,
//设为 true 时若端口已被占用则会直接退出,而不是尝试下一个可用端口
strictPort: false,
//自定义代理规则
proxy: {
// 选项写法
"/api": {
target: "https://admin.itrustnow.com",
// target: "http://192.168.0.50:8083",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
});
Vite常用基本配置
{
root: process.cwd(), // 项目根目录(index.html 文件所在的位置),
base: '/', // 开发或生产环境服务的公共基础路径 配置引入相对路径
mode: 'development', // 模式
plugins: [vue()], // 需要用到的插件数组
publicDir: 'public', // 静态资源服务的文件夹
cacheDir: 'node_modules/.vite', // 存储缓存文件的目录
resolve: {
alias: [ // 文件系统路径别名
{
find: /\/@\//,
replacement: pathResolve('src') + '/'
}
],
dedupe: [], // 强制 Vite 始终将列出的依赖项解析为同一副本
conditions: [], // 解决程序包中 情景导出 时的其他允许条件
mainFields: [], // 解析包入口点尝试的字段列表
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], // 导入时想要忽略的扩展名列表
preserveSymlinks: false, // 启用此选项会使 Vite 通过原始文件路径确定文件身份
},
css: {
modules: {
scopeBehaviour: 'global' | 'local',
// ...
},
postcss: '', // 内联的 PostCSS 配置 如果提供了该内联配置,Vite 将不会搜索其他 PostCSS 配置源
preprocessorOptions: { // css的预处理器选项
scss: {
additionalData: `$injectedColor: orange;`
}
}
},
json: {
namedExports: true, // 是否支持从.json文件中进行按名导入
stringify: false, // 开启此项,导入的 JSON 会被转换为 export default JSON.parse("...") 会禁用按名导入
},
esbuild: { // 最常见的用例是自定义 JSX
jsxFactory: 'h',
jsxFragment: 'Fragment'
},
assetsInclude: ['**/*.gltf'], // 指定额外的 picomatch 模式 作为静态资源处理
logLevel: 'info', // 调整控制台输出的级别 'info' | 'warn' | 'error' | 'silent'
clearScreen: true, // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息
envDir: '/', // 用于加载 .env 文件的目录
envPrefix: [], // 以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中
server: {
host: '127.0.0.1', // 指定服务器应该监听哪个 IP 地址
port: 5000, // 指定开发服务器端口
strictPort: true, // 若端口已被占用则会直接退出
https: false, // 启用 TLS + HTTP/2
open: true, // 启动时自动在浏览器中打开应用程序
proxy: { // 配置自定义代理规则
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
},
cors: true, // 配置 CORS
force: true, // 强制使依赖预构建
hmr: { // 禁用或配置 HMR 连接
// ...
},
watch: { // 传递给 chokidar 的文件系统监听器选项
// ...
},
middlewareMode: '', // 以中间件模式创建 Vite 服务器
fs: {
strict: true, // 限制为工作区 root 路径以外的文件的访问
allow: [], // 限制哪些文件可以通过 /@fs/ 路径提供服务
deny: ['.env', '.env.*', '*.{pem,crt}'], // 用于限制 Vite 开发服务器提供敏感文件的黑名单
},
origin: 'http://127.0.0.1:8080/', // 用于定义开发调试阶段生成资产的 origin
},
build: {
target: ['modules'], // 设置最终构建的浏览器兼容目标
polyfillModulePreload: true, // 是否自动注入 module preload 的 polyfill
outDir: 'dist', // 指定输出路径
assetsDir: 'assets', // 指定生成静态文件目录
assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码
cssCodeSplit: true, // 启用 CSS 代码拆分
cssTarget: '', // 允许用户为 CSS 的压缩设置一个不同的浏览器 target 与 build.target 一致
sourcemap: false, // 构建后是否生成 source map 文件
rollupOptions: {}, // 自定义底层的 Rollup 打包配置
lib: {}, // 构建为库
manifest: false, // 当设置为 true,构建后将会生成 manifest.json 文件
ssrManifest: false, // 构建不生成 SSR 的 manifest 文件
ssr: undefined, // 生成面向 SSR 的构建
minify: 'esbuild', // 指定使用哪种混淆器
terserOptions: {}, // 传递给 Terser 的更多 minify 选项
write: true, // 启用将构建后的文件写入磁盘
emptyOutDir: true, // 构建时清空该目录
brotliSize: true, // 启用 brotli 压缩大小报告
chunkSizeWarningLimit: 500, // chunk 大小警告的限制
watch: null, // 设置为 {} 则会启用 rollup 的监听器
},
preview: {
port: 5000, // 指定开发服务器端口
strictPort: true, // 若端口已被占用则会直接退出
https: false, // 启用 TLS + HTTP/2
open: true, // 启动时自动在浏览器中打开应用程序
proxy: { // 配置自定义代理规则
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
},
cors: true, // 配置 CORS
},
optimizeDeps: {
entries: [], // 指定自定义条目——该值需要遵循 fast-glob 模式
exclude: [], // 在预构建中强制排除的依赖项
include: [], // 可强制预构建链接的包
keepNames: false, // true 可以在函数和类上保留 name 属性
},
ssr: {
external: [], // 列出的是要为 SSR 强制外部化的依赖,
noExternal: '', // 列出的是防止被 SSR 外部化依赖项
target: 'node', // SSR 服务器的构建目标
}
}
Vite项目打包配置详解的更多相关文章
- Maven项目pom.xml配置详解
maven项目pom.xml文件配置详解,需要时可以用作参考: <project xmlns="http://maven.apache.org/POM/4.0.0" xmln ...
- JAVAEE——spring01:介绍、搭建、概念、配置详解、属性注入和应用到项目
一.spring介绍 1.三层架构中spring位置 2.spring一站式框架 正是因为spring框架性质是属于容器性质的. 容器中装什么对象就有什么功能.所以可以一站式. 不仅不排斥其他框架,还 ...
- (图文教程)IntelliJ IDEA 导入Eclipse/MyEclipse 项目 配置详解+快捷键分享
(图文教程)IntelliJ IDEA 导入Eclipse/MyEclipse 项目 配置详解+快捷键分享 IntelliJ IDEA 使用教程.快捷键配置. 该教程针对原始jar包依赖的工程.mav ...
- Maven使用笔记(四)pom.xml配置详解
pom.xml文件配置详解 --声明规范 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=" ...
- maven常用插件配置详解
常用插件配置详解Java代码 <!-- 全局属性配置 --> <properties> <project.build.name>tools</proje ...
- 黑苹果引导工具 Clover 配置详解及Clover Configurator使用
黑苹果引导工具 Clover 配置详解及Clover Configurator使用 2017-03-11 14:01:40 by SemiconductorKING 转自:@三个表哥 简介: 可 ...
- 【转】Maven pom.xml 配置详解
原文链接:https://yq.aliyun.com/articles/38271 pom.xml文件配置详解 --声明规范 <project xmlns="http://maven. ...
- webpack4配置详解之常用插件分享
前言 继上一次webpack的基础配置分享之后,本次将分享一些工作中项目常用的配置插件.也会包含一些自己了解过觉得不错的插件,如有分析不到位的,欢迎纠错,嗯,这些东西文档都有,大佬可绕过. Wepac ...
- Maven 变量及常见插件配置详解
Maven 的 pom.xml 常用 变量 插件 配置 详解 一.变量 - 自定义变量及内置变量 1. 自定义变量 <properties> <project.build.name& ...
- Android Studio gradle配置详解
android gradle配置详解 AppExtension类及其属性 可能大部分人看到AppExtension类会感觉到非常的陌生,其实我们在app中的build.gradle中填写配置信息的时候 ...
随机推荐
- windwos11没有Hyper-V的解决方法
我的系统是windows11家庭版,程序添加这就没有hyper-v,但是可以手动添加,把下面这个脚本修改后缀.cmd即可(如:hyper-v.cmd),不会的可以直接下载我这个文件. Hyper-v执 ...
- CVE-2018-8174漏洞复现(IE浏览器远程代码执行漏洞)
漏洞介绍:CVE-2018-8174这个漏洞是针对IE浏览器的一个远程代码执行漏洞,是Windows VBScript Engine 代码执行漏洞,由于VBScript脚本执行引擎(vbscript. ...
- 02. C语言基础知识
一.注释 注释 就是对代码进行解释说明的文字,注释的内容不会参与编译和运行,仅仅是对代码的解释说明.在 C语言 中注释主要分为以下两类: 单行注释://,注释内容从 // 始到本行和结尾 多行注释 ...
- Cannot read property 'xxxx' of null
在使用的vue3+element-plus的项目中,我使用了form表单对数据进行校验. 但是使用了: refDom.value.validate((valid) => {}) 后,过一会控制台 ...
- c# 调用User32.dll
获取当前窗口句柄:GetForegroundWindow()[DllImport("user32.dll", CharSet = CharSet.Auto, ExactSpelli ...
- c语言中定义局部变量不赋初值默认
C语言中定义局部变量不赋初值默认为随机数,全局变量定义时候不赋初值默认为0. 但是在keil3中我发现不管全局变量还是局部变量都默认是0.
- java-javaSE-异常机制
java中的异常结构 java 中的所有异常都来自于顶级父类 Throwable,Throwable 有两个子类 Exception 和 Error Error 是 Java 虚拟机无法解决的严重问题 ...
- rxswift自定义扩展UI组件
扩展UI组件时常用到的一些发布者与订阅者如下: 发布者: ControlEvent(专门用于描述 UI 控件所产生的事件) 订阅者(观察者): Binder(专门用于绑定UI状态的,如:当某个状态改变 ...
- ORACLE 失效索引重建
-- 获取失效索引 SELECT * FROM USER_INDEXES WHERE TABLE_NAME IN ('表名') AND STATUS = 'UNUSABLE'; -- 重建语法alte ...
- 性能测试-ps与vmstat
1.ps命令-获取当前系统的进程状态 ps >ps(process status) 获取帮助: man ps 获取当前系统的进程状态 ps-ef-eF-elv 使用标准语法查看系统上的每个进程 ...