visetattribute（vite.config.ts常规配置（publicPath））

@vue.confing.js中的publicPath属性变为base属性

import { defineConfig } from ‘vite’

import vue from ‘@vitejs/plugin-vue’ // 单文件组件支持

/**

Vue 3 单文件组件支持：@vitejs/plugin-vue Vue 3 JSX 支持：@vitejs/plugin-vue-jsx Vue 2.7 支持：vitejs/vite-plugin-vue2 Vue <2.7 的支持：underfin/vite-plugin-vue2

/

import AutoImport from ‘unplugin-auto-import/vite’ // 使用后可以不手动引入ref reactive onMounted这些api

import Components from ‘unplugin-vue-components/vite’ // vite的按需引入自定义组件库

// import { ElementPlusResolver } from ‘unplugin-vue-components/resolvers’ // ElementPlus

import { NaiveUiResolver } from ‘unplugin-vue-components/resolvers’ // NaiveUi组件

import path from “path
  
  
  
  
  
  
 ”; // 和NodeJS “path  
  
  
  
  
  
  ”模块一样

/* 自定义组件自动引入 unplugin-vue-components element-plus 组件自动引入 unplugin-vue-components vue3等插件 hooks 自动引入 unplugin-auto-import/vite message, notification 等引入样式自动引入 vite-plugin-style-import

/

export default defineConfig({

// 需要用到的插件数组              。Falsy 虚值的插件将被忽略
  
  
  
  
  
  
 ，插件数组将被扁平化（flatten）

plugins: [

vue(),

AutoImport({

resolvers: [NaiveUiResolver()],

imports: [

“vue
 


 


 


 


 


 


 

”,

{

“naive-ui
 
 
 
 
 
 
”: [

“useDialog   
   
   
   
   
   
   ”,

“useMessage
 

 

 

 

 

 

 
”,

“useNotification

 

 

 

 

 

 

”,

“useLoadingBar              ”,

],

},

],

}),

Components({

resolvers: [NaiveUiResolver()],

}),

],

define: {

“process.env
 
 

 
 

 
 

 
 

 
 

 
 

 
 ”: {},

},

// 作为静态资源服务的文件夹 默认： public

publicDir: “public













”,

/*

该目录中的文件在开发期间在 / 处提供  
  
  
  
  
  
  ，并在构建期间复制到 outDir 的根目录
 


 


 


 


 


 


 

，并且始终按原样提供或复制而无需进行转换
  
 
  
 
  
 
  
 
  
 
  
 
  
。

该值可以是文件系统的绝对路径
 
 
 
 
 
 
，也可以是相对于项目的根目录的相对路径












。

将 publicDir 设定为 false 可以关闭此项功能 
  
  
  
  
  
  
 。

/

// root: ‘’, // 项目根目录（index.html 文件所在的位置）可以是一个绝对路径   
   
   
   
   
   
   ，或者一个相对于该配置文件本身的相对路径
  
  
  
  
  
  
 。

// define: ‘’, //

// mode: ‘’, //默认： ‘development’ 用于开发
 

 

 

 

 

 

 
，‘production’ 用于构建; 在配置中指明将会把 serve 和 build 时的模式 都 覆盖掉
 


 


 


 


 


 


 
。也可以通过命令行 --mode 选项来重写 
 
 
 
 
 
 
。

base: “./                    ”, // 类似publicPath

 

 

 

 

 

 

，./避免打包访问后空白页面              ，要加上
 
 

 
 

 
 

 
 

 
 

 
 

 
 ，不然线上也访问不了

/* 开发或生产环境服务的公共基础路径
   
   
   
   
   
   
  。合法的值包括以下几种：

绝对 URL 路径名













，例如 /foo/

完整的 URL                    ，例如 https://foo.com/

空字符串或 ./（用于嵌入形式的开发）

/

// dts: ‘./auto-imports.d.ts’, // 插件配置之后 
 
 
 
 
 
 
 
 
 
 
 
 
 ，运行代码时会自动在根目录下(通过dts配置可修改路径)生成一个auto-import.d.ts文件




















，需要将此文件添加到tsconfig.json中             ，否则在使用api时会提示未定义：

// 如果报错__dirname找不到  
 
  
 
  
 
  
 
  
 
  
 
  
 ，需要安装node,执行npm install @types/node --save-dev

// 这里需要始终使用绝对路径
 

 

 

 

 

 

 
。相对路径的别名值会原封不动地被使用













，因此无法被正常解析 

 

 

 

 

 

 
。

resolve: {

alias: {

“@ 
 
 
 
 
 
 
 
 
 
 
 
 
 ”: path.resolve(__dirname, “src




















”), // 路径别名

// “@assets             ”: path.resolve(__dirname, “src/assets  
 
  
 
  
 
  
 
  
 
  
 
  
 ”),

// “@components













”: path.resolve(__dirname, “src/components
  
  
  
  
  
  
 ”),

// “@images  
  
  
  
  
  
  ”: path.resolve(__dirname, “src/assets/images
 


 


 


 


 


 


 

”),

// “@pages
 
 
 
 
 
 
”: path.resolve(__dirname, “src/pages   
   
   
   
   
   
   ”),

// “@store
 

 

 

 

 

 

 
”: path.resolve(__dirname, “src/store

 

 

 

 

 

 

”),

},

extensions: [“.js              ”, “.json
 
 

 
 

 
 

 
 

 
 

 
 

 
 ”, “.ts













”, “.vue                    ”], // 使用路径别名时想要省略的后缀名
  
  
  
  
  
  
 ，可以自己 增减

},

// 全局引入less

css: {

preprocessorOptions: {

less: {

// modifyVars: {

// hack: true; @import (reference) "${path.resolve("src/assets/css/global.less")}";,

// },

// javascriptEnabled: true,

charset: false,

additionalData: ‘@import “src/assets/css/global.less 
 
 
 
 
 
 
 
 
 
 
 
 
 ”;’,

},

},

},

// 打包配置

build: {

outDir: “www.qe121.com




















”, // 打包生成文件的名称

assetsDir: “assets             ”, // 指定静态资源存放路径

sourcemap: false, // 是否构建要 source map 文件

minify: “terser  
 
  
 
  
 
  
 
  
 
  
 
  
 ”, // 混淆器  
  
  
  
  
  
  ，terser 构建后文件体积更小
 


 


 


 


 


 


 

，‘terser’ | ‘esbuild’

chunkSizeWarningLimit: 1500, //chunk 大小警告的限制
 
 
 
 
 
 
，默认500KB

rollupOptions: {

output: {

// 最小化拆分包

manualChunks(id) {

if (id.includes(“node_modules













”)) {

return id

.toString()

.split(“node_modules/
  
  
  
  
  
  
 ”)[1]

.split(“/  
  
  
  
  
  
  ”)[0]

.toString();

}

},

chunkFileNames: “js/[name].[hash].js
 


 


 


 


 


 


 

”, // 用于命名代码拆分时创建的共享块的输出命名   
   
   
   
   
   
   ，[name]表示文件名,[hash]表示该文件内容hash值

},

},

terserOptions: {

// 生产环境移除console打印

compress: {

drop_console: true,

drop_debugger: true,

},

// 去掉注释内容

output: {

comments: true,

},

},

},

// 服务配置

server: {

https: false, // 为 true 时启用 TLS + HTTP/2

open: true, // 为 true 时自动在浏览器中打开应用程序

cors: true, // 允许跨域 开发服务器配置 CORS              。默认启用并允许任何源

port: 1019, // 端口号 指定开发服务器端口

strictPort: true, // 设为 true 时若端口已被占用则会直接退出
 

 

 

 

 

 

 
，而不是尝试下一个可用端口

host: true, // 指定服务器应该监听哪个 IP 地址

 
 

 
 

 
 

 
 

 
 

 
 

 
。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址

 

 

 

 

 

 

，包括局域网和公网地址












。

headers: {}, // 指定服务器响应的 header                     。

origin: “http://127.0.0.1:1019
 
 
 
 
 
 
”, // 用于定义开发调试阶段生成资产的 origin
 
 
 
 
 
 
 
 
 
 
 
 
 
。

// base: ‘’, // 在 HTTP 请求中预留此文件夹              ，用于代理 Vite 作为子文件夹时使用



















。应该以 / 字符开始和结束              。

// 代理配置

// proxy: {

// “/api   
   
   
   
   
   
   ”: {

// target: “
 

 

 

 

 

 

 
”, // 后台接口

// changeOrigin: true,

// secure: false, // 如果是https接口
 
 

 
 

 
 

 
 

 
 

 
 

 
 ，需要配置这个参数

// // ws: true, //websocket支持

// rewrite: (path) => path.replace(/^/api/, “

 

 

 

 

 

 

”),

// },

// },

// 禁用或配置 HMR 连接（用于 HMR websocket 必须使用不同的 http 服务器地址的情况）

hmr: {

overlay: false, // 禁用开发服务器错误的屏蔽

/* 当 server.hmr.server 被定义后













，Vite 将会通过所提供的的服务器来处理 HMR 连接
  
 
  
 
  
 
  
 
  
 
  
 
  
。如果不是在中间件模式下                    ， Vite 将尝试通过已有服务器处理 HMR 连接












。 这在使用自签证书或想通过网络在某端口暴露 Vite 的情况下 
 
 
 
 
 
 
 
 
 
 
 
 
 ，非常有用 
  
  
  
  
  
  
 。

/

// server: {} ,

},

// 传递给 chokidar 的文件系统监听器选项

// watch: {

// // 被监听的包必须被排除在优化之外




















，

// // 以便它能出现在依赖关系图中并触发热更新
  
  
  
  
  
  
 。

// ignored: [‘!/node_modules/your-package-name/

’]

// },

// 以中间件模式创建 Vite 服务器

// middlewareMode: ‘ssr’,

/* ‘ssr’ 将禁用 Vite 自身的 HTML 服务逻辑             ，因此你应该手动为 index.html 提供服务
 


 


 


 


 


 


 
。 ‘html’ 将启用 Vite 自身的 HTML 服务逻辑 
 
 
 
 
 
 
。 /

fs: {

strict: true, // 限制为工作区 root 路径以外的文件的访问

// allow: [‘…’], // 可以为项目根目录的上一级提供服务

/* 当 server.fs.allow 被设置时  
 
  
 
  
 
  
 
  
 
  
 
  
 ，工作区根目录的自动检索将被禁用
   
   
   
   
   
   
  。 限制哪些文件可以通过 /@fs/ 路径提供服务
 

 

 

 

 

 

 
。当 server.fs.strict 设置为 true 时













，访问这个目录列表外的文件将会返回 403 结果 

 

 

 

 

 

 
。 /

deny: [“.env              ”, ".env.", “*.{pem,crt}
 
 

 
 

 
 

 
 

 
 

 
 

 
 ”], // 用于限制 Vite 开发服务器提供敏感文件的黑名单              。

},

},

// 引入第三方的配置

optimizeDeps: {

include: [],

// include: [‘your-package-name’],

},

});