Vue 工程配置文件

1 package.json

vite build 和 vite 是 Vite.js 的两个命令。

vite 是一个开发服务器，它可以快速地在浏览器中启动一个开发环境，并支持热更新。使用 vite 命令可以启动 Vite.js 的开发服务器。

vite build 是一个命令行工具，它可以将 Vite.js 项目打包成生产环境的代码。使用 vite build 命令可以将项目打包成静态文件，可以部署到服务器上。

简单来说，vite 是用来启动开发服务器的，vite build 是用来将项目打包成生产环境的代码的。

{
  "name": "featuremanage",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite --mode development",
    "build": "run-p type-check build-only",
    "wbuild": "run-p type-check build-only && copy D:\\XXX\\dist\\* D:\\software\\nginx-1.25.2\\html\\ && copy D:\\xxx\\dist\\assets\\* D:\\software\\nginx-1.25.2\\html\\assets\\",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "axios": "^1.2.0",
    "consola": "^2.15.3",
    "echarts": "^5.4.3",
    "element-plus": "^2.3.1",
    "file-saver": "^2.0.5",
    "less": "^4.1.3",
    "mitt": "^3.0.1",
    "moment": "^2.29.4",
    "sass": "^1.58.3",
    "vue": "^3.2.47",
    "vue-dompurify-html": "^4.0.0",
    "vue-router": "^4.1.6",
    "vuedraggable": "^4.1.0",
    "vuex": "^4.1.0",
    "vxe-table": "^4.5.9",
    "xe-utils": "^3.5.7",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@types/node": "^18.14.4",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vitejs/plugin-vue-jsx": "^3.0.0",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "@vue/tsconfig": "^0.1.3",
    "eslint": "^8.34.0",
    "eslint-plugin-vue": "^9.9.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.8.4",
    "typescript": "~4.8.4",
    "unplugin-auto-import": "^0.15.2",
    "unplugin-vue-components": "^0.24.1",
    "vite": "^4.1.4",
    "vite-plugin-style-import": "^2.0.0",
    "vite-plugin-svg-icons": "^2.0.1",
    "vue-tsc": "^1.2.0"
  }
}

2 .env.development .env.production

在默认情况下，使用 vite build (或者 vite)命令时，如果没有指定 --mode 参数，Vite 会默认以 production（生产）模式进行构建。

一般环境有：开发、测试、预发布、灰度、生产。Vite会通过dotenv去解析相应env文件，然后loadEnv加载env进入import.env中提供使用。默认的环境变量需要以VITE_开头，不然会被Vite自动过滤掉。

import.meta.env.VITE_VUE_APP_FEATURE_MGMT_BASE_URL_HTC

export default defineConfig({
    envPrefix: "ENV_", // 设置变量前缀名为 ENV_
    envDir: "/" // 加载 .env 文件的目录默认为根目录
})

3 vite.config.ts

别名

import {defineConfig} from 'vite'
import path from 'path';
export default defineConfig({
resolve:{
    alias:{ // 设置别名
       '@':path.resolve( dirname,'./src')
	    }
    }
})


resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },

设置证书和代理

https 的证书可以本地用脚本创建一个

  server: {
    https: {
      key: fs.readFileSync('./localhost.key'),
      cert: fs.readFileSync('./localhost.crt'),
    },
    // https: false,
    open: true,
    cors: true,
    port: 8081,
    host: 'localhost.xxx.com',
    proxy: {
      '/path_prefix': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ''),
        bypass
      }
    },
    hmr: {
      overlay: false
    }
  },

function bypass(req: http.IncomingMessage, res: http.ServerResponse, options:ProxyOptions){
  const proxyUrl = new URL( options?.rewrite?.(req.url || '') || '',(options.target) as string)?.href || '';
  req.headers["x-req-proxyUrl"] = proxyUrl;// 设置无效
  res.setHeader("x-res-proxyUrl",proxyUrl);// 有效
}

build

vite build 打包过后的资源所在的路径

 build: {
    outDir: 'dist',
    assetsDir: 'assets'
  },

base

nginx 部署设置为 /

export default defineConfig({
  base: '/',

其它. 如何区分环境 process.env.NODE_ENV

vite中环境变量的使用与配置

• process.env 是Node.js中的一个API，它返回一个对象，包含了当前Shell的所有环境变量。
• 在Vue 2项目中，由于使用了webpack，它帮助处理了环境变量，使得浏览器能够直接识别这些变量。
• 在Vite项目中，由于代码运行在浏览器环境中，无法直接识别process.env变量。这意味着Vite中识别环境变量的方式与webpack不同。
• 另一方面，vite.config.js文件运行在Node.js环境中，因此可以识别process.env变量。

vite中自定义环境变量

Vite内置了dotenv这个第三方库， dotenv会自动读取.env文件， dotenv 从你的 环境目录 中的下列文件加载额外的环境变量：

.env # 所有情况下都会加载
.env.[mode] # 只在指定模式下加载

默认情况下:

npm run dev 会加载 .env 和 .env.development 内的配置
npm run build 会加载 .env 和 .env.production 内的配置
mode 可以通过命令行 --mode 选项来重写。

4 tsconfig.json

这是一个TypeScript的配置文件，用于配置TypeScript编译器的选项。

功能和目的：

配置TypeScript编译器的选项，使其能够正确地编译TypeScript代码。
提供模块引用的别名，使得在代码中可以使用更简洁的路径来引用模块。
使用场景：
这个文件通常用于TypeScript项目中，特别是使用Vue框架的TypeScript项目中。

主要逻辑：

"extends": "@vue/tsconfig/tsconfig.web.json" 表示这个tsconfig.json文件继承了@vue/tsconfig/tsconfig.web.json文件中的配置。
"include": ["env.d.ts", "src/**/*.ts"] 表示编译器将编译src目录下所有的.ts文件以及env.d.ts文件。
"compilerOptions": 这个对象包含了一系列的编译器选项，如：
"baseUrl": "." 表示基础URL为当前目录。
"strict": false 表示关闭严格模式。
"paths": 这个对象定义了模块引用的别名，例如"@/": ["./src/"]表示所有以"@/"开头的模块引用都被解析为"./src/"目录下的模块。
"references": 这个数组包含了对其他tsconfig.json文件的引用，例如"./tsconfig.node.json"。
"jsx": "preserve" 表示编译器将保留JSX语法，不进行转换。

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*.ts"],
  "compilerOptions": {
    "baseUrl": ".",
    "strict": false,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "jsx": "preserve"
}

5 .prettierrc.json

这段代码是一个Prettier配置文件，Prettier是一个强大的代码格式化工具，用于格式化JavaScript、TypeScript、CSS、HTML等代码。

功能和目的：

配置代码风格：Prettier默认的代码风格可能并不适合所有人，这个配置文件就是用来定制Prettier的代码风格的。
自动格式化代码：Prettier可以自动将不符合预设代码风格的代码格式化成符合预设的代码风格，这样可以保证代码的一致性，提高代码的可读性。
使用场景：

在团队开发中，每个人的代码风格可能不同，但是需要统一的代码风格，这时就可以使用Prettier配置文件来统一代码风格。
在编写代码的过程中，Prettier可以自动帮助格式化代码，提高开发效率。
主要逻辑：

"$schema"：定义了这个配置文件的JSON schema，这个schema定义了这个配置文件的结构和格式。
"semi"：定义了是否在语句后面添加分号，false表示不添加。
"tabWidth"：定义了一个tab代表的空格数量，这里设置为2。
"singleQuote"：定义了是否使用单引号，true表示使用。
"printWidth"：定义了一行代码的最大长度，超过这个长度的代码会被换行，这里设置为100。
"trailingComma"：定义了是否在数组和对象的最后一个元素后面添加逗号，"none"表示不添加。

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

6 .eslintrc.cjs

这是一个ESLint配置文件，ESLint是一个用于检查JavaScript代码的工具，可以帮助开发者找出代码中的问题。

功能和目的：

配置ESLint的规则，使其能够正确地检查代码。
帮助开发者编写符合规范的代码，提高代码的质量。
使用场景：
这个文件通常用于JavaScript项目中，特别是需要进行代码质量检查的项目中。

主要逻辑：

"extends": ["plugin:vue/vue3-essential", "@vue/standard", "@vue/typescript/recommended"] 表示这个配置文件继承了vue3-essential、@vue/standard和@vue/typescript/recommended这三个配置。
"env": 这个对象定义了代码运行的环境，例如"browser": true表示代码将在浏览器环境中运行。
"parserOptions": 这个对象定义了解析器的选项，例如"ecmaVersion": 2020表示使用ES2020的语法。
"rules": 这个对象定义了各种规则，例如"semi": ["error", "always"]表示要求在语句后面添加分号，如果不添加，将会报错。
"overrides": 这个数组定义了各种覆盖规则，例如第一个元素表示对.vue文件的规则，第二个元素表示对test文件夹中的文件的规则。

7 设置请求拦截器

import axios from 'axios'
const service = axios.create({
    // baseURL: COMMON_PATH.SERVICE_PATH_HTC, // url = base url + request url
    withCredentials: true, // send cookies when cross-domain requests
    timeout: 300000, // request timeout
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    }
})

service.interceptors.request.use(
    (config) => {
        // 可以在 localStorage 读取值
        // 可以读取 cookie
        // 可以判断 url 路径 
        // 可以添加公共参数 
        if (!config.url.includes("url_path")) {
            return config
        }
        config.params = {
            ...config.params,
            // 添加公共参数
            common_para: 123
        };
        config.data = {
            ...config.data,
            common_para: 456
        }
        return config
    },
    (err) => {
        return Promise.reject(err)
    }
)
service.interceptors.response.use(res => {
        if (res.status === 200) {
            // 做一些操作：保存 cookie token、localStorage 等等
        }
        
        return res
        
    },
    (err) => {
        if (err.response.status === 401) {
            window.location.href = “"重定向地址" + encodeURIComponent(window.location.href)
        } else {
            return Promise.reject(err)
        }
    })

router

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import Index from '../views/Index.vue'

const router = createRouter({
  // history: createWebHashHistory(import.meta.env.BASE_URL),
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: Index
    },
    {
      path: '/test',
      redirect: '/test/a',
    },
    {
      path: '/test/:name',
      component: () => import('test.vue'),
    }
  ]
})

export default router

test.vue

接收 vue 路由的路径参数

const route = useRoute()
const routerParamName = computed(() => {
  switch (route.params.name) {
    case 'a':
      break;
    case 'b':
      break;
    case 'c':
      break;
    default:
      break;
  }
})