前端工程化实践-01-基础搭建

介绍

项目使用 vite + vue3（pinia+vur-router） + ts + naive-ui
文章中可能发现没有写到的内容是我觉得比较杂，不好归纳，请下载仓库查看 https://gitee.com/ren-dewang/viteProject
各位大佬发现问题可以评论出来，方便我及时改正。

项目目录

csharp 复制代码

config/  # Vite 配置文件
    ├─  common.ts
    ├─  dev.ts
    ├─  prod.ts
    ├─  test.ts
public
src/
    ├─ api              #接口文件夹
    ├─ assets/          # 静态资源（图片、字体等）
    ├─ components/      # 公共组件
    ├─ enums            # 项目常量配置
    ├─ hooks            # 组合式逻辑复用（自定义 hooks）
    ├─ layouts          # 布局组件
    ├─ locals           # 国际化配置
    ├─ plugins          # 插件
    ├─ router           # 路由配置（Vue Router）
    ├─ settings         # 原始配置
    ├─ store            # 状态管理（Pinia）
    ├─ styles           # 样式文件
    ├─ utils            # 工具函数
    ├─ views            # 页面级组件
    ├─ App.vue
    └─ main.ts
    └─ vite.config.ts

基础搭建

使用vite创建项目，这里选择使用pnpm，选择vue+ts

js 复制代码

pnpm create vite
输入项目名称，选择技术

增加vite基础配置

common.ts 是公共配置，dev.ts、prod.ts、test.ts 是不同环境的配置

js 复制代码

config
├─ common.ts
├─ dev.ts
├─ prod.ts
└─ test.ts

在vite.config.ts

ts 复制代码

import { defineConfig, mergeConfig } from 'vite'
import common from './config/common'
import dev from './config/dev'
import prod from './config/prod' 
import test from './config/test'

export default defineConfig(({ mode, command }) => {  
  console.log('vite.config.ts', mode, command);
  
  if (mode === 'development') {
    return mergeConfig(common, dev)
  }
  if (mode === 'production') {
    return mergeConfig(common, prod)
  }
  if (mode === 'test') {
    return mergeConfig(common, test)
  }
  return common
})

mode 关注的是运行环境，它能让你依据不同的环境（开发、生产、测试）来调整配置。
command 关注的是执行的命令，它能让你根据启动开发服务器或者构建项目这两种不同的操作来调整配置。
defineConfig是vite提供的一个方法，用于定义vite配置
mergeConfig是vite提供的一个方法，用于合并vite配置。 vitejs.cn/vite5-cn/gu...

common.ts文件

ts 复制代码

resolve: {
    alias: {
      "@": path.resolve(__dirname, "../src"), // 路径别名
    },
    extensions:['.ts','.js','.vue','.json']
  },
plugins: [vue()],

resolve.alias是路径别名，extensions是文件扩展名。

path.resolve是node.js提供的一个方法，用于解析路径。

方法	描述	示例	返回
path.join	连接路径	path.join('/foo', 'bar', 'baz')	返回 '/foo/bar/baz'
path.resolve	解析路径	path.resolve('/foo/bar', './baz')	返回 '/foo/bar/baz'
path.relative	计算相对路径	path.relative('/foo/bar', '/foo/baz')	返回 '../baz'
path.dirname	获取目录名	path.dirname('/foo/bar/baz')	返回 '/foo/bar'
path.basename	获取文件名	path.basename('/foo/bar/baz.html') / path.basename('/foo/bar/baz.html', '.html')	返回 'baz.html' / 返回 'baz'。
path.extname	获取文件扩展名	path.extname('/foo/bar/baz.html')	返回 '.html'
path.parse	解析路径	path.parse('/foo/bar/baz.html')	返回 { root: '/', dir: '/foo/bar', base: 'baz.html', ext: '.html', name: 'baz' }
path.format	格式化路径	path.format({ dir: '/foo/bar', base: 'baz.html' })	返回 '/foo/bar/baz.html'

方法	描述
__dirname	当前文件所在目录
__filename	当前文件所在目录（包括文件））
process.cwd()	当前工作目录

使用本项目目录就是

__dirname：D:\桌面\项目\前端工程化\vite-project\config

__filename：D:\桌面\项目\前端工程化\vite-project\config\common.ts process.cwd()： D:\桌面\项目\前端工程化\vite-project

dev.ts文件

typescript 复制代码

import { loadEnv } from 'vite';

const env = loadEnv(process.env.NODE_ENV as string, process.cwd())
const _base_url = env.VITE_APP_BASE_API;

export default {
  server: {
    host: "0.0.0.0",
    port: 8080,
    open: true,
    cors: true,
    proxy: {
      [`^${_base_url}`]: {
        target: 'http://192.168.9.83:8080',
        changeOrigin: true,
        rewrite: (p: string) => p.replace(new RegExp(`^${_base_url}`), '')
      },
    },
    hmr: { // 热更新配置
      overlay: true, // 显示错误覆盖层
    },
  },
};

环境变量管理

使用.env文件区分环境，使用vite提供的loadEnv方法加载环境变量。 .env.development .env.production .env.test

ini 复制代码

# 页面标题
VITE_APP_TITLE = 'vue3-admin'

# 开发环境配置
VITE_APP_ENV = 'development'

#开发环境
VITE_APP_BASE_API = '/dev-api'

VITE_APP_BASE_API 是开发环境的接口地址，在开发环境下，使用代理转发到本地，在生产环境下，使用真实的接口地址。

不同环境下可以使用不同的借口地址，避免混用，
方便切换整个项目的借口地址
开发使用测试数据，上线使用真实数据，互不影响。

ESLint 代码检查

sql 复制代码

pnpm add eslint eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

在项目根目录下创建.eslintrc.js文件，配置eslint规则。

java 复制代码

module.exports = {
    root: true,
    env: { browser: true, es2021: true },
    extends: [
      'eslint:recommended',
      'plugin:vue/vue3-recommended',
      'plugin:@typescript-eslint/recommended',
      'plugin:prettier/recommended'
    ],
    parser: 'vue-eslint-parser',
    parserOptions: {
      parser: '@typescript-eslint/parser',
      sourceType: 'module'
    },
    plugins: ['vue', '@typescript-eslint'],
    rules: {
      // 自定义规则
      'vue/multi-word-component-names': 'off',
      '@typescript-eslint/no-explicit-any': 'off'
    }
  }

prettier 代码格式化

arduino 复制代码

pnpm add prettier eslint-config-prettier eslint-plugin-prettier -D

在项目根目录下创建.prettierrc.json文件，配置prettier规则。

json 复制代码

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 80,
  "tabWidth": 2
}

在package.json文件中配置prettier命令。

json 复制代码

"scripts": {
    "format": "prettier --write src"
  }