阅读量

“前端项目搭建”

vue+ts+pinia+axios+element/vant+eslint+prettier+hook+sass/less+

img

1.pnpm create vite

2.输入项目名

3.选择模式——vue

4.customize with create-vue

5.选择需要的项目配置

img

6.我们使用git init来生成一个仓库。然后git add . ，git commit- m”” 来进行初次提交。

img

7.项目构建完成后，切换到对应目录，安装依赖，启动项目。

img

8.构建Prettier和Eslint的联系

构建Prettier和Eslint的联系，需要安装一下下面的两个插件。

eslint-config-prettier //用于解决和 Prettier 冲突的 ESLint 的配置

eslint-plugin-prettier //启用 eslint-plugin-prettier

1
pnpm i eslint-config-prettier eslint-plugin-prettier -D
修改 ESLint 配置，使 Eslint 兼容 Prettier 规则

打开.eslintrc.cjs文件,放在extends配置项的末尾，因为extends中后引入的规则会覆盖前面的规则。

那么就可以在.prettierrc.json 中定义自己的代码风格校验。本地的prettier插件会根据这个文件来格式化，项目配置的prettier也会根据该文件来格式化。且eslint的风格与prettier风格冲突的地方会以prettier为主。

1
plugin:prettier/recommended //如果说版本冲突就删除一个版本的prettier
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  }
}
'

img

如遇到以下的报错，分析日志信息，发现eslint-config-prettier出现了两个版本，猜测是其他插件包依赖的eslint-config-prettier版本是8.10.0,当前安装的是9.1.0。导致出现了版本冲突，删除9.1.0的eslint-config-prettier，装一下8.10.0就可以了。

img

img

//下面这一部分很麻烦

9.集成lint-staged和husky

int-staged 是一个专门针对已放入 Git 暂存区的文件进行检查的工具

husky 能提供监听 Git 操作并执行脚本代码的能力

安装 lint-staged和husky

1
pnpm i lint-staged husky --save-dev

配置lint-staged

在package.json中添加下面的代码，匹配暂存区所有的js，vue文件，并执行命令。

1
2
3
4
5
6
7
8
"lint-staged": {
  "*.{js,vue,jsx,tsx}": [
    "pnpm lint",
    "prettier --write",
    "eslint --cache --fix",
    "git add"
  ]
}

img

配置husky，实现在git 提交时执行 lint-staged

配置脚本钩子，实现在”pnpm i”后自动执行对应的hooks

在 package.json的”scripts“中配置快捷命令，用来在安装项目依赖时生成 husky 的相关文件，配置项postinstall或者prepare都可以。

1
2
3
4
5
6
7
8
{
  // ...
  "scripts": {
    // ...
    "postinstall": "husky install"
  },
}

img

在 package.json 文件中，”postinstall” 是一个特殊的脚本钩子，它在 npm install（或等效的 pnpm i、yarn install）命令执行后自动运行。这个特性是由 npm（以及兼容的包管理器如 pnpm 和 yarn）提供的，旨在在安装包后自动执行某些任务。

当在项目中使用 pnpm i 命令安装依赖时，pnpm 会检查 package.json 文件中的 “scripts” 部分，特别是 “postinstall” 脚本。如果存在 “postinstall” 脚本，pnpm 将在所有包安装完成后自动执行该脚本中定义的命令。

在 package.json 中，”postinstall” 被设置为 “husky install”。这意味着每次执行 pnpm i 安装依赖后，pnpm 会自动执行 husky install 命令。这个命令的作用是安装 Husky，Husky是一个流行的 Git 钩子工具，用于在 Git 操作（如提交、推送等）时自动运行脚本。

“prepare” 和 “postinstall” 是 package.json 文件中定义的两个不同的 npm 生命周期钩子，它们在不同的时间点被触发，适用于不同的用途。下面是它们的主要区别：

  1. 触发时机:
    • “prepare” : 这个钩子在几个关键场景中被触发，包括在本地执行 npm install（没有参数）后、在作为 git 依赖安装到其他项目之前、以及在运行 npm pack 和 npm publish 之前（在打包“npm pack”或发布“npm publish”你的库到 npm 之前，会执行 “prepare” 脚本。这样可以确保在打包或发布前运行必要的构建步骤或检查。）。
    • “postinstall” : 这个钩子仅在 npm install 或等效命令（如 pnpm i 或 yarn install）执行后触发，不论是在本地安装项目依赖时，还是作为依赖安装到其他项目中时。
  1. 用途:
    • “prepare” : 通常用于在发布包之前执行构建脚本或其他准备工作。例如，如果你的包需要编译或转换代码，或者需要在发布前进行某些自动化检查，那么 “prepare” 是合适的选择。
    • “postinstall” : 通常用于在安装项目依赖后执行一些设置或配置工作。比如安装或配置工具，或执行一些只在项目初次安装依赖时需要的操作。
  1. 场景应用:
    • 使用 “prepare” 当你的包需要在发布前进行构建或准备工作，或者当你的包被作为 git 依赖安装时。
    • 使用 “postinstall” 适合在每次安装依赖时都需要执行的操作，如安装 Git 钩子或其他项目配置。

如果对npm script命令不太了解参考下方链接进行学习

juejin.cn/post/684490…

www.ruanyifeng.com/blog/2016/1…

配置完成后，执行pnpm i，会在项目根目录生成 .husky/_ 目录。

img

生成pre-commit文件

执行下面的命令, husky会 生成 git 操作的监听钩子脚本。

1
npx husky add .husky/pre-commit "npx lint-staged"//该命令已经废弃，使用手动添加

打开.husky/pre-commit 文件，可以看到以下内容，git commit时，这个脚本作为 Git 钩子运行，使用 lint-staged 来对暂存区中的文件执行代码检查。

img

如果没有可以手动更改

到此完成了git commit时自动去触发eslint的检测和修复。修改代码后git add . git commit，就可以发现代码检测和修复生效了。

1
2
3
4
5
#!/bin/sh
. "$(dirname "$0")/husky.sh"//在同一目录下

# 在这里执行 lint-staged
npx lint-staged

10.Git 提交规范建设校验commit格式

前置知识

commitlint是什么？

当我们运行 git commmit -m ‘xxx’ 时，用来检查 xxx 是否满足固定格式的工具。简单来说，就是制定提交规范

提交的格式，与常见的规范

  • 提交格式 （注意冒号后面有空格）

git commit -m [optional scope]:

type ：用于表明我们这次提交的改动类型，是新增了功能？还是修改了测试代码？又或者是更新了文档？

optional scope：一个可选的修改范围。用于标识此次提交主要涉及到代码中哪个模块。

description：一句话描述此次提交的主要内容，做到言简意赅。

  • 常用的 type 类型

img

安装commitlint
1
pnpm i --save-dev @commitlint/config-conventional @commitlint/cli
生成commit-msg文件

文件中可以配置在 **git commit 时对 commit 信息的校验指令

可手动创建文件再输入文件内容，但是建议使用命令创建，命令如下:

1
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'//已经废弃

上面命令执行成功后会在 .husky 目录下生成一个 commit-msg 文件，该文件的内容如下，表示在 git commit 前执行一下 npx –no – commitlint –edit $1 指令。

当你进行 Git 提交时，这个 commit-msg 文件会被触发，它先初始化 Husky，然后使用commitlint 来检查你的提交信息是否符合预设的规范。

1
2
3
4
#!/usr/bin/env sh
. "$(dirname -- "$0")/husky.sh"

npx --no -- commitlint --edit $1

检查一下可能要手动配置

项目根目录创建名为commitlint.config.js的文件,配置提交规范
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
module.exports = {
    extends: ["@commitlint/config-conventional"],
    // 定义规则类型
    rules: {
      // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
      "type-enum": [
        2,
        "always",
        [
          "feat", // 增加新功能
          "fix", // 修复 bug
          "del", // 删除功能
          "update", // 更新功能
          "docs", // 文档相关的改动
          "style", // 不影响代码逻辑的改动，例如修改空格，缩进等
          "build", // 构造工具或者相关依赖的改动
          "refactor", //  代码重构
          "revert", // 撤销，版本回退
          "test", // 添加或修改测试
          "perf", // 提高性能的改动
          "chore", // 修改 src 或者 test 的其余修改，例如构建过程或辅助工具的变动
          "ci", // CI 配置，脚本文件等改动
        ],
      ],
      // subject 大小写不做校验
      "subject-case": [0],
    },
    plugins: [
      {
        rules: {
          "commit-rule": ({ raw }) => {
            return [
              /^[(feat|fix|del|update|docs|style|build|refactor|revert|test|perf|chore)].+/g.test(raw),
              `commit备注信息格式错误，格式为 <[type] 修改内容>，type支持${types.join(",")}`,
            ];
          },
        },
      },
    ],
  };

提供Commit提示信息，实现交互式commit，简化提交的负担

img

安装commitizen、cz-customizable

commitizen： commit命令行提示

cz-customizable：自定义的Commitizen的交互信息

1
pnpm add commitizen cz-customizable -g//需要开启管理员权限
配置信息

根目录新建一个.cz-config.cjs文件（一开始创建的是.js文件，提示使用cjs代替，于是修改为.cjs文件），在根目录创建的.cz-config.cjs 添加以下代码，自定义commit提示内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
module.exports = {
    types: [
      { value: 'feat', name: 'feat:     新功能' },
      { value: 'fix', name: 'fix:      修复bug' },
      { value: 'del', name: 'del:     删除功能'},
      {value: 'update', name: 'update:     更新功能'},
      { value: 'docs', name: 'docs:     文档变更' },
      { value: 'style', name: 'style:    代码格式(不影响代码运行的变动)' },
      {
        value: 'refactor',
        name: 'refactor: 重构(既不是增加feature，也不是修复bug)'
      },
      { value: 'perf', name: 'perf:     性能优化' },
      { value: 'test', name: 'test:     测试用例变更' },
      { value: 'chore', name: 'chore:    构建过程或辅助工具的变动' },
      { value: 'revert', name: 'revert:   回退' },
      { value: 'build', name: 'build:    打包' },
      //ci变动
      { value: 'ci', name: 'ci:      CI 配置或脚本文件的改动' }
    ],
    // override the messages, defaults are as follows
    messages: {
      type: '请选择提交类型:',
      // scope: '请输入文件修改范围(可选):',
      // used if allowCustomScopes is true
      customScope: '请输入修改范围(可选):',
      subject: '请简要描述提交(必填):',
      body: '请输入详细描述(可选，待优化去除，跳过即可):',
      // breaking: 'List any BREAKING CHANGES (optional):\n',
      footer: '请输入要关闭的issue(待优化去除，跳过即可):',
      confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
    },
    allowCustomScopes: true,
    // allowBreakingChanges: ['feat', 'fix'],
    skipQuestions: ['body', 'footer'],
    // limit subject length, commitlint默认是72
    subjectLimit: 72
  }

package.json添加以下内容：

1
2
3
4
"scripts" : {
  ...
  "commit": "./node_modules/cz-customizable/standalone.js"
}
1
2
3
4
5
6
7
8
9
10
...
"config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    },
    "cz-customizable": {
      "config": "./.cz-config.cjs"
    }
  }
}

配置完成后，输入git cz，出现下面的内容，说明接入成功了

后面的提交，使用git cz来代替git commit

img

但是很有可能报错，如果是多个pretter可以注释掉在前面package.json配置的

如果是eslint检验commitlint.config.js

可以让他忽略对这个文件的校验（在文件顶部加上/* eslint-disable */）

9.另外一种husky(黑马)

image-20240322225924156

image-20240323100244629

1
2
3
4
5
6
7
8
9
10
11
pnpm dlx husky-init && pnpm install

"lint-staged":{
    "*.{js,ts,vue}":[
      "eslint --fix"
    ]
  }
  
  "lint-staged":"lint-staged"
  
  pnpm lint-staged

10.其他可扩展的规范校验接入

  • 集成Style-lint，提交时校验并格式化css、less、scss代码
  • 接入Eslint-plugin-filenames，实现对文件夹文件名的命名校验
  • 补充Prettier、Eslint自定义规则

配置全局 scss 样式文件

安装saas

1
pnpm i sass -d

新增样式文件

在 src/assets 下新增 style 文件夹，用于存放全局样式文件,新建 main.scss, 设置一个用于测试的颜色变量

1
2
$primary-color: #007bff;
$warning-color: #ffc107;

如何将这个全局样式文件全局注入到项目中呢？vite.config.ts添加下方配置

1
2
3
4
5
6
7
css:{
   preprocessorOptions:{
     scss:{
       additionalData:'@import "@/assets/style/main.scss";'
     }
   }
 },

组件内使用

1
2
3
4
5

.title {
    color: $primary-color;
}

配置路径别名

依赖安装

@types/node 是一个 NPM 包，它的作用是为 Node.js 环境中的 JavaScript 提供 TypeScript 类型定义。当在 TypeScript 项目中使用 Node.js 时，这个包非常重要

1
pnpm i @types/node -D

vite.config.ts:第一种配置（我使用这种）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// path 模块提供了一些工具函数，用于处理文件与目录的路径
import { resolve } from 'path'
// 使用 defineConfig 工具函数，这样不用 jsdoc 注解也可以获取类型提示
import { defineConfig } from 'vite'

/** 当前执行 node 命令时文件夹的地址（工作目录） */
const root: string = process.cwd()

/** 路径拼接函数，简化代码 */
const pathResolve = (dir: string): string => resolve(root, dir)

export default defineConfig({
  resolve: {
    alias: [
      // 设置 `@` 指向 `src` 目录
      { find: '@', replacement: pathResolve('src') },
      // 设置 `@assets` 指向 `src/assets` 目录
      { find: '@assets', replacement: pathResolve('src/assets') },
      // 设置 `@components` 指向 `src/components` 目录
      { find: '@components', replacement: pathResolve('src/components') },
      // 设置 `@views` 指向 `src/views` 目录
      { find: '@views', replacement: pathResolve('src/views') },
      // 设置 `@utils` 指向 `src/utils` 目录
      { find: '@utils', replacement: pathResolve('src/utils') }
      // 可以根据需要添加更多的别名
    ],
  },
})

vite.config.ts:第二种配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@assets': fileURLToPath(new URL('./src/assets', import.meta.url)),
      '@components': fileURLToPath(new URL('./src/components', import.meta.url)),
      '@views': fileURLToPath(new URL('./src/views', import.meta.url)),
      '@utils': fileURLToPath(new URL('./src/utils', import.meta.url))
    }
  }
})

tsconfig.json声明paths

无论是使用配置一还是配置二，都需要在tsconfig.json声明paths（只能在tsconfig.json加上下面配置）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "compilerOptions": {
    // ... 其他已有的配置

    // 设置基础 URL 为项目根目录
    "baseUrl": ".",

    // 定义别名
    "paths": {
      "@/": ["./src/"],
      "@assets/*": ["./src/assets/*"],
      "@components/*": ["./src/components/*"],
      "@views/*": ["./src/views/*"],
      "@utils/*": ["./src/utils/*"]
    }
  },

  // ... 其他 TypeScript 配置，如 include、exclude 等
}

请求封装

安装axios

1
pnpm i axios

实际使用中可以根据项目修改，比如RESTfulapi中可以自行添加put和delete请求,ResType也可以根据后端的通用返回值动态的去修改

简单二次封装

新增 service 文件夹，service 下新增 http.ts 文件、 api 文件夹。api文件夹下做接口做统一管理，按照模块来划分。详见下方文件树👇。

service

1
2
3
4
5
6
7
8
9
10
11

├── api

│ └── login

│ ├── login.ts

│ └── types.ts

└── http.ts

img

http.ts代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
//http.ts
import axios from 'axios'

// 设置请求头和请求路径
axios.defaults.baseURL = '/api'
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
axios.interceptors.request.use(
  (config) => {
    const token = window.sessionStorage.getItem('token')
    if (token) {
      //@ts-ignore
      config.headers.token = token
    }
    return config
  },
  (error) => {
    return error
  }
)
// 响应拦截
axios.interceptors.response.use((res) => {
  if (res.data.code === 111) {
    sessionStorage.setItem('token', '')
    // token过期操作
  }
  return res
})

interface ResType<T> {
  code: number
  data?: T
  msg: string
  err?: string
}
interface Http {
  get<T>(url: string, params?: unknown): Promise<ResType<T>>
  post<T>(url: string, params?: unknown): Promise<ResType<T>>
  upload<T>(url: string, params: unknown): Promise<ResType<T>>
  download(url: string): void
}

const http: Http = {
  get(url, params) {
    return new Promise((resolve, reject) => {
      axios
        .get(url, { params })
        .then((res) => {
          resolve(res.data)
        })
        .catch((err) => {
          reject(err.data)
        })
    })
  },
  post(url, params) {
    return new Promise((resolve, reject) => {
      axios
        .post(url, JSON.stringify(params))
        .then((res) => {
          resolve(res.data)
        })
        .catch((err) => {
          reject(err.data)
        })
    })
  },
  upload(url, file) {
    return new Promise((resolve, reject) => {
      axios
        .post(url, file, {
          headers: { 'Content-Type': 'multipart/form-data' },
        })
        .then((res) => {
          resolve(res.data)
        })
        .catch((err) => {
          reject(err.data)
        })
    })
  },
  download(url) {
    const iframe = document.createElement('iframe')
    iframe.style.display = 'none'
    iframe.src = url
    iframe.onload = function () {
      document.body.removeChild(iframe)
    }
    document.body.appendChild(iframe)
  },
}
export default http

login.ts代码

1
2
3
4
5
6
7
8
9
10
11
import http from '@/service/http'
import * as T from './types'

const loginApi: T.ILoginApi = {
    login(params){
        return http.post('/login', params)
    }

}
export default loginApi

types.ts代码

1
2
3
4
5
6
7
8
export interface ILoginParams {
    userName: string
    passWord: string | number
}
export interface ILoginApi {
    login: (params: ILoginParams)=> Promise<any>
}

至此,一个简单地请求封装完成了!!!!

全局状态管理-Pinia的配置

前置知识

pinia的模式有两种：options API 和 composition API。 推荐使用composition API 模式定义store，符合Vue3 setup 的编程模式，让结构更加扁平化。

创建总入口

在src/store目录下创建一个入口index.ts，其中包含一个注册函数registerStore()，其作用是把整个项目的store都提前注册好，最后把所有的store实例挂到appStore透传出去。这样以后，只要我们在项目任何组件要使用pinia时，只要import appStore进来，取对应的store实例就行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// src/store/index.ts
import { useCounterStore } from "./counter";

export interface IAppStore {
    useCounter: ReturnType<typeof useCounterStore>;
    // 其他store...
}

const appStore:IAppStore = {} as IAppStore;

/**
 * 注册app状态库
*/
export const registerStore = () => {
    appStore.useCounter = useCounterStore();
    // 其他store...
}

export default appStore;

composition API模式下不支持某些内置方法，如$reset()，解决方式是重写一下reset方法。

src/utils/storeTools

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// src/utils/storeTools
// Pinia store基础集成方法
import type { IAppStore } from '@/store'

/**
 * 重构$reset()
 * @desc 因为setup模式编程不支持reset方法，这里要手动重构
 * @param appStore
 */
export const initResetFun = (appStore: IAppStore) => {
  // 遍历 appStore 中的所有项。
  Object.values(appStore).forEach((item：any) => {
    // 创建一个空对象 initState 用于存储初始状态。
    const initState = {} as Record<string, any>

    // 遍历 item 的 $state 对象的所有条目。
    Object.entries(item.$state).forEach((item) => {
      // 将每个状态的初始值存储到 initState 对象中。
      initState[item[0]] = item[1]
    })

    // 为每个 store 项定义一个 reset 方法。
    item.reset = () => {
      // 遍历 $state 对象的所有状态。
      Object.keys(item.$state).forEach((state) => {
        // 将每个状态重置为其初始值。
        item.$state[state] = initState[state]
      })
    }
  })
}

src/store/index.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//src/store/index.ts
//导入counter.ts
import { useCounterStore } from "./counter";
import { initResetFun } from '@/utils/storeTools'

export interface IAppStore {
    useCounter: ReturnType<typeof useCounterStore>;
    // 其他store...
}

const appStore:IAppStore = {} as IAppStore;

/**
 * 注册app状态库
*/
export const registerStore = () => {
    appStore.useCounter = useCounterStore();
    // 其他store...

    //重写reset方法
    initResetFun(appStore);
}

export default appStore;

简单修改一下counter Store的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//src/store/counter.ts
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)

  const increment= () => {
    count.value++
  }
  
  const decrement= () => {
    count.value--
  }

  return { count, doubleCount, increment,decrement }
})

总线注册

在src/main.ts项目总线注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { registerStore } from './store'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

//注册pinia状态管理库
registerStore();

app.mount('#app')

具体业务组件使用例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//src/components/PiniaSetup.vue
<script setup lang='ts'>
import { storeToRefs } from 'pinia';
import appStore from '@/store/index';

// Pinia composition API 模式
const { count, doubleCount } = storeToRefs(appStore.useCounter)
const { increment,decrement } = appStore.useCounter

</script>
<template>
    <div>
        <h1>Pinia composition 模式！</h1>
        <p>Pinia state:count=<b>{{ count }}</b></p>
        <p>pinia getters:doubleCount=<b>{{ doubleCount }}</b></p>
        <button @click="increment">
            increment
        </button>
        <button @click="decrement">decrement</button>
    </div>
</template>

<style lang='scss' scoped></style>

环境变量配置

前置知识

vite 提供了两种模式：具有开发服务器的开发模式（development）和生产模式（production）

在项目根目录下，你可以创建一个或多个环境文件。这些文件以 .env 开头，后面可以跟上为特定模式（如 development、production）指定的后缀。例如：

  • .env：在所有的环境中加载。
  • .env.local：在所有的环境中加载，但会被 git 忽略。
  • .env.development：只在开发环境中加载。
  • .env.production：只在生产环境中加载。

新建.env.development、.env.production 文件

根目录新建 .env.development 文件，内容如下：

1
2
3
4
NODE_ENV=development

VITE_APP_WEB_URL= 'YOUR WEB URL'

根目录新建 .env.production 文件 ，内容如下：

1
2
3
4
NODE_ENV=production

VITE_APP_WEB_URL= 'YOUR WEB URL'

组件中使用：

1
console.log(import.meta.env.VITE_APP_WEB_URL)

包区分开发环境和生产环境

package.json 的scripts中加入下面内容

1
2
3
"build:dev": "vite build --mode development",
"build:pro": "vite build --mode production"

报错Delete ␍eslintprettier/prettier

pnpm run lint –fix

本文作者： lllry
本文链接： http://wusterlllry.xyz/2024/03/22/%E6%96%B0%E5%BB%BA%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE/
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
知识共享许可协议

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

一个普普通通的我，慢慢吞吞的学习着