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’],
  },
  });