新建一个项目

 

 

参考：https://www.cnblogs.com/liandudu/p/17559780.html

第一步：

vite官网搭建项目  pnpm create vite或者 yarn create vite--自己选vue  然后js 我不想用ts---然后pnpm install 安依赖 然后pnpm run dev启动搞定

第二步：

pnpm install vue-router --save

新建router文件夹下新建index.ts 书写路由（自己写2个页面） 然后main.ts导入路由并挂载路由
router-view输出

<router-view>: 该标签会根据当前的路径, 动态渲染出不同的组件.
网页的其他内容, 比如顶部的标题/导航, 或者底部的一些版权信息等会和<router-view>处于同一个等级.
在路由切换时, 切换的是<router-view>挂载的组件, 其他内容不会发生改变

import.meta.env.BASE_URL 这个变量，它是由 Vite 提供的环境变量，详见 Vite 官网

使用其他构建工具请自行替换为对应构建工具提供的环境变量，
如使用 @vue/cli 创建的项目因为是基于 Webpack ，所以使用的是 process.env.BASE_URL

但是实际中 vite项目中两者都能打印出来
console.log(process.env.NODE_ENV,'看了看')
console.log(import.meta.env.BASE_URL,'看了看')

更改app.vue  添加路由出口

 <router-view></router-view>

更改main.js 注册路由

router/index.js 添加路由信息，然后就可以浏览器上跳转路由了

 

草塔大爷的，哈希模式不是这个api   是这个  createWebHashHistory，fuck改这个就行了

 第3步：清除所有默认的css

 

先删除这个css

 

pnpm install normalize.css  然后main.js引入，不好用

虽然它清除了body的默认样式，但是H1的margin它并没有清除，so我还是自己写一个reset.css （喊豆包写一个）搞定这些不光body没得默认margin， h1也没得了

 

第4步:安装less

pnpm install less-loader less --save-dev

第5步:安装element-plus，且按需引入，且按需引入图标【看官网】

@1全部引入,打包1.21M--如图

 

@2按需引入：pnpm install -D unplugin-vue-components unplugin-auto-import  ,打包176 KB ,我操尼玛 比1.21M小太多了，按需引入还是香啊

main.js注释掉这2个，按需引入不需要这3个

 

 按需引入 vite.config.js配置（copy官网）

 

• AutoImport 插件会自动导入 Vue 3 的一些组合式 API（如 ref、reactive 等）和 Element Plus 的一些方法和属性，无需手动导入。【这里有个问题，我定义变量的时候认不到ref】
• Components 插件会根据组件的使用情况自动导入 Element Plus 的组件，无需在文件中手动导入组件。
• ElementPlusResolver 是 element-plus 的解析器，用于识别和解析 element-plus 的组件和 API。

AutoImport 插件【这里有个问题，我定义变量的时候认不到ref】

解决方案：

vite.config.js中加上这句话

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'   // https://vite.dev/config/ export default defineConfig({   plugins: [     vue(),     AutoImport({       // 确保导入 Vue 3 的组合式 API,如ref等       imports: ['vue'],       resolvers: [ElementPlusResolver()],     }),     Components({       resolvers: [ElementPlusResolver()],     }),   ], })

　　

 实测OK，如图

 

按需导入element的图标

 

 pnpm install @element-plus/icons-vue

安装后直接使用，搞定

 

 如果要使用中文（虽然它默认中文），就要引入element-plus，亲测打包后跟完全引入打包后大小差不多了，但是页面上不用一个个引入了，因为配置了按需引入，只是打包大小差不多而已，就这样把，万一以后它要国际版呢，到时候替换一波就行了（把zhCn替换成引文）

 

第6步:配置路径别名（延伸一下：多别名配置）

vite.config.js配置 搞定

 

延伸一下：多别名配置，还是挺不错的

?

1 2 3 4 5 6 7 8 9

resolve: {     alias: {       '@': path.resolve(__dirname, 'src'),       '@components': path.resolve(__dirname, 'src/components'),       '@views': path.resolve(__dirname, 'src/views'),       '@assets': path.resolve(__dirname, 'src/assets'),       }   }

　　

 

 第7步:配置px转化为vw的（保证浏览器放大缩小样式错乱的问题）

pnpm install postcss-px-to-viewport postcss-loader autoprefixer --save-dev
然后配置vite.config.js---搞定

 

 但是本插件无法转化style内联样式：尽量避免使用内联样式，因为 postcss-px-to-viewport 主要针对 CSS 文件或 <style> 标签中的样式。例如，将内联样式改为 <style> 标签：

 

规范就是不能写style就能解决

 

当echarts有些配置项 只有数字这种如何解决？

 

 

 第8步:配置pinia

 

 第9步:配置axios

pnpm install axios

pnpm install qs 序列化--针对不同的Content-Type类型 -处理数据（

• 序列化是将 JavaScript 对象转换为可传输的字符串格式，以便在网络请求中使用。
• axios 默认会将 JavaScript 对象序列化为 JSON 字符串，但对于不同的 Content-Type 可以使用不同的序列化方法。
• 可以使用 qs 等库实现自定义序列化，如将对象序列化为 application/x-www-form-urlencoded（确保数据以 key=value&key2=value2 的形式发送） 格式。

• 确保数据以服务器能够理解的格式发送，不同的服务器端技术栈可能对请求体的数据格式有不同的要求，序列化可以满足这些要求。
• 确保数据可以作为文本在网络上传输，避免传输 JavaScript 对象可能导致的问题；
• 当服务器返回数据时，通常也是以字符串形式（如 JSON 字符串）发送响应。axios 会自动将响应数据反序列化为 JavaScript 对象，你可以直接使用 response.data 访问该对象。

）

pnpm install json-bigint  【处理后端返回的特大数据 精度丢失的问题】

 

如何动态配置

Content-Type

  baseURL: process.env.VITE_APP_BASE_URL,

  timeout: process.env.VITE_APP_API_TIMEOUT,

 

新建了.env.development   .env.production .env.test之后，在axios中替换写死的url和超时

在开发环境中定义的环境变量：

?

1 2 3 4

# API 基础地址 VITE_APP_BASE_URL=http://localhost:3000/api # API 超时时间（毫秒） VITE_APP_API_TIMEOUT=5000

　　

 

  baseURL: process.env.VITE_APP_BASE_URL,

  timeout: process.env.VITE_APP_API_TIMEOUT,

报错：ReferenceError: process is not defined；在 Vite 项目中，当你看到 ReferenceError: process is not defined 报错时，通常是因为 Vite 默认使用 ES 模块标准，而 process 是 Node.js 环境中的全局对象，在浏览器环境中不存在。

// 正确使用 Vite 的环境变量
import.meta.env.VITE_API_URL   搞定 【

• 注意，Vite 要求环境变量以 VITE_ 开头，这样它们才会被暴露给客户端代码。

】

 我在main.js中能打印挂载全局的$ai 组件中使用的时候报错

app.config.globalProperties.$api = api;

console.log(app.config.globalProperties.$api,'裙子勒'); // 这里打印 $api 是在挂载后进行，能打印出来

 

解决方案是使用proviede inject替代globalProperties

 在使用的组件里面接收这个实例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// 接收axios实例const fetchData = async () => {   try {     // 发送 Post 请求     let params = {       dateId: "",       typeId: null,     };     const resData = await $api.post(userModels.loginUrl, params);     console.log(resData, "打印一下呢");   } catch (err) {     console.log("error");   } finally {     console.log("最终");   } };

const $api = inject("$api");

 

　　

 就可以调用接口了，然后报错跨域的问题。

明明我已经改了跨域设置：它还是报跨域，原来

原来这个也要改成本地地址才能代理到目标地址，搞定

 

 

vite.config.js 设置端口（固定一个端口） 以及根据不同的环境打不同环境的包(自己ai把)

 

为啥本地打印出来是生产没搞明白

 

 

 

 

npm run build 时，Vite 会加载 .env.production 文件中的环境变量

如果你想使用不同的环境变量文件（如 .env.test），可以在 package.json 中添加自定义脚本

  "build:test": "vite build --mode test"

第10步:配置eslint

 

 

其他遇到的问题

我每次打开vite项目vscode自己都启动了  （npx vite --port=4000），手动关闭自动启动项目