重生之我在公司写前端 | “博灵语音通知终端” | 项目配置

限制包管理工具

配置：package.json

"scripts": {
  "preinstall": "npx only-allow pnpm"
},

src 别名 @

# 安装 @types/node
pnpm add -D @types/node

配置：vite.config.ts

import path from 'path';

import { defineConfig } from 'vite';

// https://vite.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      // 配置 '@' 为 src 目录的别名
      '@': path.resolve(__dirname, 'src'),
    },
  },
});

配置：tsconfig.app.json

"compilerOptions": {
    // 解析非相对模块的基地址，通常设置为项目的根目录
    "baseUrl": "./",
    // 路径映射配置，定义模块路径别名
    "paths": {
        // '@' 别名指向 src 目录
        "@/*": ["src/*"]
    },

    // 强制 lib 为 ES2023 或更高，以支持部分方法
    "lib": ["ES2023", "DOM"]
}

sass

# sass: 提供 Sass 编译功能，支持 .scss 和 .sass 文件的编译
pnpm add -D sass

重置全局样式

创建：src/styles/reset.scss

/* 移除默认的边距和填充 */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* 设置字体和字体大小 */
body {
  font-family: system-ui, sans-serif;
  font-size: 100%;
  line-height: 1;
}

/* 重置链接样式 */
a {
  color: inherit;
  text-decoration: none;
}

/* 移除列表项的圆点样式 */
ul,
ol {
  list-style: none;
}

/* 移除表格的默认间距 */
table {
  border-spacing: 0;
  border-collapse: collapse;
}

/* 重置块级元素的边距和填充 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  padding: 0;
  margin: 0;
}

/* 移除默认的引号样式 */
blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
}

/* 设置图片样式 */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 确保 `hr` 的样式一致 */
hr {
  margin: 10px 0;
  border: 0;
  border-top: 1px solid #ccc;
}

/* 调整内联元素的文本对齐方式 */
b,
strong {
  font-weight: bold;
}

i,
em {
  font-style: italic;
}

创建：src/styles/index.scss

// 引入重置样式文件
@forward "reset";

配置：main.ts

// 引入全局样式
import "@/styles/index.scss";

全局共享变量

创建：src/styles/variables.scss

配置：vite.config.ts

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 全局 SCSS 变量注入
        additionalData: '@use "@/styles/variables.scss" as *;',
      },
    },
  },
});

环境变量

创建：.env

# 服务端口
VITE_APP_PORT=10000

# API 地址
VITE_API_BASE_URL=/api

# 服务地址
VITE_SERVER=http://192.168.0.100/api

配置：vite-env.d.ts

/// <reference types="vite/client" />

interface ImportMetaEnv {
  // 服务端口
  readonly VITE_APP_PORT?: string;
  // API 地址
  readonly VITE_API_BASE_UR?: string;
  // 服务地址
  readonly VITE_SERVER?: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

服务端口配置：vite.config.ts

import { defineConfig, loadEnv } from 'vite';

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  // 加载当前环境的环境变量
  const envVars = loadEnv(mode, process.cwd());

  return {
    server: {
      // 服务端口，默认为 5173
      port: Number(envVars.VITE_APP_PORT) || 5173,
      // 代理
      proxy: {
        [envVars.VITE_API_BASE_URL]: {
          target: envVars.VITE_SERVER,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
  };
});

开发工具

# 安装 vite-plugin-vue-devtools
pnpm add -D vite-plugin-vue-devtools

配置：vite.config.ts

import { defineConfig } from 'vite';

import vueDevTools from 'vite-plugin-vue-devtools';

// https://vite.dev/config/
export default defineConfig({
  plugins: [vueDevTools()],
});

博灵语音通知终端 A4 支持 Modbus 服务哦！！！