vue3-vite-less-配置别名-多环境

node 升级

vite官方文档给出：Vi t e 需要 Nod e.js 版本 14.18+，16+ 。然而，有些模板需要依赖更高的 Nod e 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Nod e 版本。
所以在使用 vi t e之前，请查看 node 版本：win + r 打开黑窗口， node – v 查看 node 版本号。如果node版本不对 npm install –g n 升级 node版本到最新的稳定版（不指定版本的时候，默认升级到最新稳定版。
如果本地没有安装nod e，传送门node官网，下载安装。

使用 命令 创建 vue3项目

不选用v i t e的vue 模板

npm create v i te@la test

回车之后命名项目：pinduoduo(拼多多)
在这里插入图片描述
选择前端框架（移动鼠标上下键，当三角形移动到vue就是选中 vue 框架），然后回车

选中 ts 语言或者js 语言（vue3建议使用 ts）

然后回车，一个 v i te+vue3+t s 项目就创建完成(聪明的你一定学会了吧)
在这里插入图片描述
使用VSCode （土豪请用webStrom）找到并打开项目，并执行 npm in stall 安装项目的依赖![]

安装less

执行 npm in stall less, npm in stall less–loader
在这里插入图片描述
在assets下面新建 style->g lo bale.less 里面定义全局样式

在vite.config.ts中配置全局less 文件

css: {
    preprocessorOptions: {
      less: {
        charset: false,
        additionalData: '@import "./src/assets/style/global.less";'
      }
    }
  }

在这里插入图片描述
在vue 文件中使用全局less文件中定义的样式， 并修改 style 的 lang=“less”
npm run dev 查看页面

Vite 配置文件夹别名

项目别名配置的时候需要用的 path 模块，而path 模块是node.js的内置模块，no de不支持TS。所以在配置别名的时候，需要执行 npm install @types/no de

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入path模块
import {resolve} from 'path' 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      less: {
        charset: false,
        additionalData: '@import "./src/assets/style/global.less";'
      }
    }
  },
  //  resolve 配置别名
  resolve: {
    alias: {
        '@': resolve(__dirname, './src') // 将scr 路径命令为 @， 在需要引入src路径下的文件， 直接使用 @/***/** 
    }
  }
})

在src下面新建一个 utils 文件夹，新建一个 consle.ts文件
在这里插入图片描述
在helloWorld中引入 onMounted钩子函数
import {log, warn} from ‘@/utils/consle’

调用 utils/console.ts里面的方法。在控制台查看打印是否成功

多环境配置

vite多环境配置，参考vite官网

Vite 使用 dot env 从你的环境目录中的下列文件加载额外的环境变量：
.env # 所有情况下都会加载
.env.local # 所有情况下都会加载，但会被 git 忽略
.env.[mode] # 只在指定模式下加载
.env.[mode].local # 只在指定模式下加载，但会被 git 忽略
环境加载优先级
一份用于指定模式的文件（例如 .env.production）会比通用形式的优先级更高（例如 .env）。
另外，Vite 执行时已经存在的环境变量有最高的优先级，不会被 .env 类文件覆盖。例如当运行 VITE_SOME_KEY=123 vite build 的时候。
env 类文件会在 Vite 启动一开始时被加载，而改动会在重启服务器后生效。
加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。
为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这些环境变量：
VITE_SOME_KEY=123DB_PASSWORD=foob ar
只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码，而 DB_PASSWORD 则不会。
console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

以上片段截取vite官网。
在项目根目录下新建
.env、.env.gamma、env.alpha 文件夹(不要写到src下面去了)
在.env 文件中定义变量 VITE_project_name=拼多多 （只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码）
在这里插入图片描述
在.env 文件中定义变量 VITE_BASE_URL=http://local host:4200/gamma
（只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码）

修改 package.json文件
在这里插入图片描述
.env 文件里面的定义的变量在任何环境都会加载。
.env.[mode] # 只在指定模式下加载
所以在运行 npm run gamma的时候，会加重拼多多也会加重 local host:4200/gam ma

在Hel lowWorld中打印 import.m eta.env