前端开发环境配置

使用 fnm 管理 node 版本

安装

winget install Schniz.fnm
fnm --version

配置

开启版本自动切换 (根据 .node-version、.nvmrc、packages.json#engines#node 判断)：

# 打印 profile 文件位置
echo $profile
# 添加如下一行
fnm env --use-on-cd | Out-String | Invoke-Expression

重启 powershell 如果报错，则执行如下命令：
参考：关于执行策略 - PowerShell | Microsoft Learn

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

配置环境变量（使用管理员执行，否则配置的是用户变量）：

# 配置 node 镜像地址
setx "FNM_NODE_DIST_MIRROR" "https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/"
# 配置 node 安装目录
setx "FNM_DIR" "C:\DevKit\nodejs"

安装 node 并使用：

# 安装指定版本
fnm install 18
fnm install 20
# 列出远程
fnm list-remote
# 列出本地已安装
fnm list
# 指定默认使用版本
fnm default 18
# 切换使用版本
fnm use 20

npm 配置

参考：Node.js安装与配置（详细步骤）_nodejs安装及环境配置_liyitongxue的博客-CSDN博客

npm config set prefix "C:\DevKit\nodejs\node_global"
npm config set cache "C:\DevKit\nodejs\node_cache"
npm config set registry https://registry.npm.taobao.org

相当于在加目录下创建 .npmrc 文件：

cache=C:\DevKit\nodejs\node_cache
prefix=C:\DevKit\nodejs\node_global
registry=https://registry.npm.taobao.org

修改后，手动配置 NODE_HOME、NODE_GLOBAL 环境变量，并添加进 Path 中。

以下是 npm install 命令的一些常用选项及其含义：

--save 或 -S：将包添加到 package.json 文件的 dependencies 部分，并将其安装在 node_modules 文件夹中；(默认)
- 安装前端开发依赖的组件时使用，例如 element-ui、echarts …
--save-dev 或 -D：将包添加到 package.json 文件的 devDependencies 部分，并将其安装在 node_modules 文件夹中；
- 安装一些打包工具时使用，例如 webpack、babel …
--global 或 -g：将包安装为全局包，即 node_global 文件夹中；
- 例如 vue-cli …
--production：只安装 dependencies 部分中列出的包，而不安装 devDependencies 部分中列出的包。

Vite 配置

参考：Vite | 下一代的前端工具链 (vitejs.dev)

环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量，例如：

import.meta.env.BASE_URL：部署应用时的基本 URL；
import.meta.env.MODE：应用运行的模式；
import.meta.env.DEV：应用是否运行在开发环境；
import.meta.env.PROD：应用是否运行在生产环境；

构建时这些变量会被静态替换，因此不能企图动态取值例如 import.meta.env[key]。
如果不想被替换 (有时期望原样输出)，可以使用零宽字符 import.meta\u200b.env.MODE。

可以通过 .env 加载额外的环境变量，这些环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码 (为了安全默认只会暴露以 VITE_ 开头的环境变量)。

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

.local 的意义是用于配置每个开发人员本地不同的环境变量，故不要上传 git。

执行 vite 命令时，使用 --mode xxx 来指定 mode，默认 'development' 用于开发，'production' 用于构建。

配置

执行 vite 命令时，自动寻找当前目录下的 vite.config.js 文件，也可以通过 --config 参数指定配置文件：

vite --config my-config.js

在配置文件中可以通过 loadEnv 加载环境变量：

import { defineConfig, loadEnv } from 'vite'
 
export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // vite 配置
    define: {
      __APP_ENV__: env.APP_ENV
    }
  }
})

配置项参考：共享配置 | Vite 官方中文文档 (vitejs.cn)

vite.config.js

import { defineConfig, loadEnv } from 'vite'
 
import baseConfig from './config/vite.base.config.js'
import devConfig from './config/vite.dev.config.js'
import prodConfig from './config/vite.prod.config.js'
 
// 根据当前环境拼接配置文件
const envResolver = {
  serve: () => {
    console.log('开发环境...')
    return { ...baseConfig, ...devConfig }
  },
  build: () => {
    console.log('生产环境...')
    return { ...baseConfig, ...prodConfig }
  }
}
 
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  console.log('command: ', command)
  console.log('mode: ', mode)
  // const env = loadEnv(mode, `${process.cwd()}\\config`, '')
  // console.log(env)
  return envResolver[command]()
})

vite.base.config.js

import { fileURLToPath, URL } from 'node:url'
 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/dist/resolvers.js'
import Components from 'unplugin-vue-components/dist/vite.js'
 
// https://vitejs.dev/config/
export default defineConfig({
  // 开发或生产环境服务的公共基础路径
  base: '/',
  // 环境变量文件的位置
  envDir: 'config',
  // 以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中。
  // 不应被设置为空字符串 ''，这将暴露你所有的环境变量，导致敏感信息的意外泄漏。
  // envPrefix: 'VITE_',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('../src', import.meta.url))
    }
  },
  // 放在 public 文件夹中的资源打包时将会被原样复制，设置为 false 禁用
  publicDir: 'public',
  plugins: [
    // 提供 Vue 3 单文件组件支持
    vue(),
    // 为打包后的文件提供传统浏览器兼容性支持
    legacy({
      targets: ['defaults', 'not IE 11']
    }),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  css: {
    preprocessorOptions: {
      less: {
        math: 'always'
      },
      sass: {}
    }
  },
  build: {
    target: 'modules',
    // outDir: 'dist',
    // assetsDir: 'assets',
    cssCodeSplit: true,
    sourcemap: false,
    minify: 'terser',
    emptyOutDir: true,
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
})

vite.dev.config.js

import { defineConfig } from 'vite'
 
export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 8080,
    open: false,
    strictPort: false, // 如果端口被占用则启动失败，而不是顺延端口号
    https: false,
    cors: true,
    // https://vitejs.cn/vite3-cn/config/server-options.html#server-proxy
    proxy: {
      '/api': {
        target: 'http://localhost:18081',
        changeOrigin: true
        // rewrite: (path) => path.replace(/^\/api/, 'gateway')
      }
    }
  }
})

vite.prod.config.js

import { defineConfig } from 'vite'
 
export default defineConfig({
  build: {
    // 指定输出路径，相对于项目根目录
    outDir: 'dist',
    // 指定生成静态资源的存放路径，相对于 build.outDir
    assetsDir: 'assets',
    // 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求，单位 Byte
    assetsInlineLimit: 4096
  }
})

plugin-legacy 插件

用于解决浏览器兼容性。

npm install -D @vitejs/plugin-legacy

// vite.config.js
import legacy from '@vitejs/plugin-legacy'
 
export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
}

加载文件夹下所有图片

// 导入文件夹下所有图片  
const industryIconImports = import.meta.glob('@/assets/images/industryIcon/*.svg');
// 保存到一个 map<文件名, 图片地址> 中
for (const path in industryIconImports) {
  const name = path.split('/').pop().replace('.svg', '');
  industryIconImports[path]().then((mod) => {
    this.$set(this.industryIconMap, name, mod.default);
  });
}

HenryKang's Docs

Explorer