github仓库地址： github.com/Liangjiahon...

项目配置文件

在项目的根目录下，新建一个 jsconfig.json 文件，用于指定 JavaScript 项目设置的配置文件

jsconfig.json 作用：

帮助编辑器理解项目的结构、代码和依赖关系，
提供有关代码提示 、自动完成和错误检查等功能
指定项目的根目录 ，配置 JavaScript 文件的搜索路径

配置内容如下：

json 复制代码

 {
   "compilerOptions": {
     "target": "es5", // 支持的最低语言版本
     "module": "esnext", // 使用ES6模块语法
     "baseUrl": "./", // 指定项目的根目录
     "moduleResolution": "node", // 使用Node的模块解析
     "paths": {
       "@/*": ["src/*"] // 定义别名
     },
     "jsx": "preserve", // 使用preserve方式输出JSX代码
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"] // 指定可用的库
   },
   "exclude": ["node_modules"] // 需要排除编译的目录
 }

JavaScript兼容处理

为了让低版本浏览器能兼容 ES2015+ 的语法，使用 vite 官方的 @vitejs/plugin-legacy 插件

@vitejs/plugin-legacy 插件作用：

自动生成传统浏览器的 chunk 及与其相对应 ES 语言特性方面的 polyfill，并且在加载时根据浏览器的支持情况按需引入这些 polyfill
github 网址： github.com/vitejs/vite...

安装 terser 和 @vitejs/plugin-legacy 插件

必须安装 terser，因为 plugin-legacy 使用 Terser 进行压缩

shell 复制代码

 pnpm install terser @vitejs/plugin-legacy -D

在 vite.config.js 中配置插件

javascript 复制代码

 import legacyPlugin from "@vitejs/plugin-legacy";
 
 plugins: [
   // ...
   legacyPlugin({
     targets: ["defaults", "not IE 11"],
   }),
 ],

安装以下插件配合 @vitejs/plugin-legacy 使用

@babel/preset-env： 根据指定的执行环境提供语法转换

shell 复制代码

 pnpm i @babel/preset-env -D

在项目根目录下新建 babel.config.json 配置文件，添加以下内容

json 复制代码

 {
   "presets": [
     [
       "@babel/preset-env",
       {
         "useBuiltIns": "usage", // 根据浏览器环境添加ES语法转换
         "corejs": "3.26.1"
       }
     ]
   ]
 }

@babel/core： 一个 Babel 转换器的核心库，用于将 ES6+ 的代码转换为向后兼容的代码

shell 复制代码

 pnpm install @babel/core -D

配置别名

项目中经常使用 @ 代表 src，需要在 vite.config.js 中配置
在 node 的 url 模块中，引入 fileURLToPath 方法和 URL 构造函数

javascript 复制代码

 import { fileURLToPath, URL } from "url";

在 reslove 配置项(和 plugins 同级)下配置路径别名

javascript 复制代码

 resolve: {
   alias: {
     // 配置路径别名
     "@": fileURLToPath(new URL("./src", import.meta.url)),
     "@img": fileURLToPath(new URL("./src/assets/img", import.meta.url)),
   },
 }

压缩HTML

使用 vite-plugin-html 插件，对打包后的 HTML 压缩
该插件还能动态处理模板 html 的 icon 、title等，以及注入自定义的数据
github 文档： github.com/vbenjs/vite...
安装插件

shell 复制代码

 pnpm install vite-plugin-html -D

在 vite.config.js 中的 plugins 配置项中使用

javascript 复制代码

 import { createHtmlPlugin } from "vite-plugin-html";
 
 plugins:[
   createHtmlPlugin({
     minify: true, // 开启压缩
     inject: {
       data: {
         title: "vite项目模板", // 可以配置动态标题
       },
     },
   })
 ]

组件库自动导入

使用 unplugin-vue-components，在开发时自动按需注册和导入 Vue 组件，该插件还可以识别如 vant、ElementUI 这种组件库，无需先行注册和导入，使用时会自动解析
github 文档：github.com/antfu/unplu...
安装插件

shell 复制代码

 pnpm install unplugin-vue-components -D

在 vite.config.js 中的 plugins 节点下配置插件

javascript 复制代码

 // 引入插件
 import Components from 'unplugin-vue-components/vite';
 import { ElementPlus } from 'unplugin-vue-components/resolvers';
 
 plugins: [
   // ElementPlus自动导入
   Components({
     resolvers: [ElementPlusResolver()]
   }),
 ]

vue函数解包

使用 unplugin-auto-import 插件，对 vue 内置的函数或组件自动解包，无需导入再使用
github 文档： github.com/antfu/unplu...
安装插件

shell 复制代码

 pnpm i unplugin-auto-import -D

在 vite.config.js 中的 plugins 节点下配置插件

javascript 复制代码

 import AutoImport from "unplugin-auto-import/vite";
 
 plugins: [
   AutoImport({
     resolvers: [ElementPlusResolver()],
     imports: ["vue", "vue-router"],
     eslintrc: { enabled: true }
   }),
 ]

配置环境变量

Vite 使用 dotenv 从环境目录中的下列文件加载额外的环境变量

shell 复制代码

 .env                # 所有情况下都会加载
 .env.local          # 所有情况下都会加载，但会被 git 忽略
 .env.[mode]         # 只在指定模式下加载
 .env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

环境加载优先级： 用于指定模式的文件(如 .env.production)会比通用形式的优先级更高(如 .env)

模式 mode： 默认情况下，开发服务器运行在 development 模式
- development：开发环境
- staging：测试环境
- production：生产环境

新建三个文件，根据环境进行获取变量

新建 .env.development，用于声明开发环境的变量

shell 复制代码

 NODE_ENV=development
 VITE_APP_ENV=development
 # 接口请求地址
 VITE_BASE_URL='/'
 # 资源地址
 VITE_RESOURCE_URL='' # 后续根据项目自行配置

新建 .env.staging，用于声明测试环境的变量

shell 复制代码

 NODE_ENV=staging
 VITE_APP_ENV=staging
 # 接口请求地址
 VITE_BASE_URL='/'
 # 资源地址
 VITE_RESOURCE_URL='' # 后续根据项目自行配置

新建 .env.production，用于声明生产环境的变量

shell 复制代码

 NODE_ENV=production
 VITE_APP_ENV=production
 # 接口请求地址
 VITE_BASE_URL='/'
 # 资源地址
 VITE_RESOURCE_URL='' # 后续根据项目自行配置

配置环境变量文件后，在 package.json 通过传递 --mode 选项标志来自定义命令使用规定模式

json 复制代码

 "scripts": {
   "dev": "vite --force", // 开发环境，强制重新构建所有文件
   "staging":"vite build --mode staging", // 打包为测试环境
   "prod": "vite build --mode production", // 打包为生产环境
 },

加载的环境变量会通过 import.meta.env 以字符串形式暴露给客户端源码

只有以 VITE_ 为前缀的变量才会暴露 给经过 vite 处理的代码

配置代理

在 vite.config.js 配置文件下的 server 节点进行配置，为开发服务器配置自定义代理规则
首先导入 vite 自带的 loadEnv 方法，用于从环境变量中加载项目的配置信息，并设置为全局变量
loadEnv 方法默认从当前工作目录中加载 .env 文件

javascript 复制代码

 import { defineConfig, loadEnv } from "vite";
 const env = loadEnv(mode, process.cwd(), ""); // process.cwd()是Node进程的工作目录

在 server 节点的 proxy 配置项进行配置代理

javascript 复制代码

 server: {
   host: "0.0.0.0",
   port: 8989, // 端口
   proxy: env.VITE_BASE_URL,
 },

配置打包

在 vite.config.js 配置文件下的 build 节点进行配置，为打包后的项目定义规则

javascript 复制代码

 import dayjs from "dayjs"; // 使用day.js格式化时间，
 
 export default defineConfig(({ command, mode }) => {
   const outputDirName = dayjs(Date.now()).format("YYYYMMDDHHmmss");
   return {
     build: {
       outDir: `dist/${outputDirName}`, // 使用"dist/时间戳"作为打包后路径
       assetsInlineLimit: 1024, // 小于1024转化为base64
       reportCompressedSize: false, // 禁用 gzip 压缩大小报告
       rollupOptions: {
         output: {
           // 将静态资源输入到不同文件夹中，如图片输出到img文件夹，字体输出到fonts文件夹
           assetFileNames: (assetInfo) => {
             let info = assetInfo.name.split(".");
             let extType = info[info.length - 1];
             if (/.(png|jpe?g|gif|svg)(?.*)?$/.test(assetInfo.name)) {
               extType = "img";
             } else if (/.(woff2?|eot|ttf|otf)(?.*)?$/i.test(assetInfo.name)) {
               extType = "fonts";
             }
             return `${extType}/[name]-[hash][extname]`;
           },
           // 设置输出代码块文件的名称和路径，这里输出到js文件夹下
           chunkFileNames: "js/[name]-[hash].js",
           // 设置输出的入口文件的名称和路径，这里输出到js文件夹下
           entryFileNames: "js/[name]-[hash].js",
           // 根据模块的路径来判断是否属于第三方库，并将其归类到不同的代码块中
           manualChunks: (id) => {
             if (id.includes("node_modules")) {
               if (id.includes("crypto-js")) return "vendor_crypto-js";
               // gasp库
               if (id.includes("gsap")) return "vendor_gsap";
               // pixi库
               if (/@?pixi[\.js]?/.test(id)) return "vendor_pixi";
               // 移动端的调试工具
               if (id.includes("vconsole")) return "vendor_vconsole";
               return "vendor";
             }
           }
         },
         preserveEntrySignatures: true // 保留每个入口模块的导出类型，配合Tree Shaking使用
       }
     }
 });

完善 vite.config.js 配置文件的其他配置项

javascript 复制代码

 export default defineConfig(({ command, mode }) => {
   const env = loadEnv(mode, process.cwd(), "");
   const outputDirName = dayjs(Date.now()).format("YYYYMMDDHHmmss");
   const isDev = env.NODE_ENV === "development";
   return {
     // 项目的URL地址，用于加载静态资源
     base: `${env.VITE_RESOURCE_URL}${!isDev ? outputDirName : ""}/`,
     mode: mode,
     brotliSize: false, // 关闭打包计算
     ...
   }
 }

预处理CSS

项目使用 less 语法，需要安装 less

shell 复制代码

 pnpm i less --save-dev

安装 normalize.css，用于初始化浏览器样式，使浏览器对所有元素的渲染更加一致
官网： necolas.github.io/normalize.c...

shell 复制代码

 pnpm i normalize.css --save

在 assets 下新建 css 文件夹，在该文件夹中新建 reset.css，用于初始化样式

css 复制代码

 @charset "UTF-8";
 
 /* css 样式统一 */
 html,
 body,
 ul,
 li,
 ol,
 dl,
 dd,
 dt,
 p,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 form,
 fieldset,
 legend,
 input,
 button,
 textarea,
 div,
 th,
 td {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
 
   /* -webkit-tap-highlight-color:transparent; */
 }
 
 html {
   overflow: -moz-scrollbars;
   overflow-y: auto;
 }
 
 /* 去掉标题默认大小 */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-size: 100%;
   font-weight: normal;
 }
 
 /* 标签格式化 */
 s {
   text-decoration: none;
 }
 
 i,
 em,
 address {
   font-style: normal;
 }
 
 a {
   text-decoration: none;
   color: inherit;
 }
 
 ul,
 ol {
   list-style: none;
 }
 
 /* 去掉蓝色边框 */
 fieldset,
 img {
   border: 0;
 }
 
 img {
   vertical-align: middle;
 }
 
 select,
 input {
   border: none;
   outline: 0;
 }
 
 /* 防止拖动 影响布局 */
 textarea {
   overflow: auto;
   font: inherit;
   resize: none;
 }
 
 table {
   border-spacing: 0;
   border-collapse: collapse;
 }
 
 /* 覆盖滚动条 */
 ::-webkit-scrollbar {
   position: fixed;
   top: 0;
   left: 0;
   width: 6px;
   height: 6px;
 }
 
 ::-webkit-scrollbar-track {
   background-color: transparent;
   border-radius: 0;
 }
 
 ::-webkit-scrollbar-thumb {
   background-color: rgb(144 147 153 / 0.3);
   border-radius: 3px;
   cursor: pointer;
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background-color: rgb(144 147 153 / 0.5);
 }

在 main.js 中引入 normalize.css 和 reset.css

javascript 复制代码

 import "normalize.css";
 import "./assets/css/reset.css";

vite+vue3项目从0到1搭建(2)---项目基本配置

项目配置文件

JavaScript兼容处理

配置别名

压缩HTML

组件库自动导入

vue函数解包

配置环境变量

配置代理

配置打包

预处理CSS