vue3+vite+ts配置_vite.config.ts

1. src别名配置

• 下载path模块

npm i @types/path

• 在vue.config.ts 配置别名路径

// vite.config.ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12

在TypeScripe配置编译命令

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": { //路径映射，相对于baseUrl
      "@/*": ["src/*"] 
    }
  }
}
1
2
3
4
5
6
7
8
9

2. svg配置

• 安装依赖

npm install vite-plugin-svg-icons -D
1

• 在vite.config.ts中配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 导入到main

import 'virtual:svg-icons-register'
1

• 使用
• 注意点文件夹名称可选，看具体的存放路径与插件的配置路径

    <svg aria-hidden="true">
      <!-- #icon-文件夹名称-图片名称 -->
      <use href="#icon-login-eye-off" />
    </svg>
1
2
3
4

2.1 封装svg全局组件

• 在src/components目录下创建一个SvgIcon组件

<template>
  <div>
    <svg :style="{ width: width, height: height }">
      <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
  </div>
</template>

<script setup lang="ts">
defineProps({
  //xlink:href属性值的前缀
  prefix: {
    type: String,
    default: '#icon-'
  },
  //svg矢量图的名字
  name: String,
  //svg图标的颜色
  color: {
    type: String,
    default: ""
  },
  //svg宽度
  width: {
    type: String,
    default: '16px'
  },
  //svg高度
  height: {
    type: String,
    default: '16px'
  }

})
</script>
<style scoped></style>
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

• 在src文件夹目录下创建一个index.ts文件：用于注册components文件夹内部全部全局组件

import SvgIcon from './SvgIcon/index.vue';
import type { App, Component } from 'vue';
const components: { [name: string]: Component } = { SvgIcon };
export default {
    install(app: App) {
        Object.keys(components).forEach((key: string) => {
            app.component(key, components[key]);
        })
    }
}
1
2
3
4
5
6
7
8
9
10

• 声明全局组件的类型 types/components.d.ts
  具体配置参考element-plus

// 设置全局组件类型
import SvgIcon from '@/components/SvgIcon.vue'
// 2. 声明 vue 类型模块
declare module 'vue' {
  // 3. 给 vue  添加全局组件类型，interface 和之前的合并
  interface GlobalComponents {
    // 4. 定义具体组件类型，typeof 获取到组件实例类型
    // typeof 作用是得到对应的TS类型
    SvgIcon: typeof SvgIcon
  }
}
1
2
3
4
5
6
7
8
9
10
11

• 在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件

import gloablComponent from './components/index';
app.use(gloablComponent);
1
2

3. 集成scss与css完成主题定制

首先说明，$ 和 :root 都是用于定义 CSS 变量的方法，但它们有一些区别。

• :root 选择器用于定义全局的 CSS 变量，通常在根元素（即 HTML 元素）中使用。例如：

:root {
  --primary-color: #007bff;
}

body{
color:var(--primary-color)
}
1
2
3
4
5
6
7

• 这样就定义了一个名为 --primary-color 的全局变量，可以在整个页面中使用。

• 而 $ 是 Sass 或者 @ 是Less 等 CSS 预处理器中定义变量的语法。在 Sass 中，可以使用 $ 符号来定义变量，例如：

$primary-color: #007bff;
body {
  color: $primary-color;
}
1
2
3
4

• 这样就定义了一个名为 $primary-color 的变量，并将其应用于 body 元素中的 color 属性。
• 总的来说，:root 用于定义全局的 CSS 变量，而 $ 用于定义预处理器中的变量。两者的作用类似，但使用方法略有不同。

3.1 在vite中配置scss

当你在index.scss全局样式文件中使用$ 变量是会报错的.因此需要给项目中引入全局变量$.

$base-menu-background: #001529;
::-webkit-scrollbar-track {
    background: $base-menu-background;
}
1
2
3
4

• 在vite.config.ts文件配置如下:

export default defineConfig((config) => {
	css: {
      preprocessorOptions: {
        scss: {
        // 用于解析$定义的样式
          javascriptEnabled: true,
          additionalData: '@import "./src/styles/variable.scss";',
        },
      },
    },
	}
}
1
2
3
4
5
6
7
8
9
10
11
12

4. 环境变量配置

项目开发过程中，会存在开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。

开发环境（development）
开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。

测试环境（testing）
测试同事干活的环境啦，一般会由测试同事自己来部署，然后在此环境进行测试

生产环境（production）
指的是软件开发中用于正式运行和交付的环境，生产环境一般会关掉错误报告，打开错误日志。(正式提供给客户使用的环境。)

注意:一般情况下，一个环境对应一台服务器,也有的公司开发与测试环境是一台服务器！！！

• 项目根目录分别添加 开发、生产和测试环境的文件!

.env.development
.env.production
.env.test
1
2
3

开发环境

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '项目的标题'
VITE_APP_BASE_API = '/dev-api'
1
2
3
4

生产环境

NODE_ENV = 'production'
VITE_APP_TITLE = '项目标题'
VITE_APP_BASE_API = '/prod-api'
1
2
3

测试环境

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'test'
VITE_APP_TITLE = '项目的标题'
VITE_APP_BASE_API = '/test-api'
1
2
3
4

• 在package.json配置运行命令

 "scripts": {
    "dev": "vite --open",
    "build:test": "vue-tsc && vite build --mode test",
    "build:pro": "vue-tsc && vite build --mode production",
    "preview": "vite preview"
  },
1
2
3
4
5
6

index.html 中使用 VITE_APP_TITLE

• 安装插件

npm add vite-plugin-html -D
1

vite.config.ts配置

import { createHtmlPlugin } from 'vite-plugin-html'
plugins: [
  createHtmlPlugin()
]
1
2
3
4

index.html <%=环境变量名%> 取出值

  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%=VITE_APP_TITLE%></title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script
1
2
3
4
5
6
7
8
9

5. 移动端适配

• 使用vw 完成移动端适配
  安装模块

npm install postcss-px-to-viewport -D
1

配置： postcss.config.ts

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      // 设备宽度375计算vw的值
      viewportWidth: 375,
    },
  },
};
1
2
3
4
5
6
7
8

6. 自动按需加载

• 安装

npm i unplugin-vue-components -D
1

• 使用

import Components from 'unplugin-vue-components/vite'
  plugins: [
    // 解析单文件组件的插件
    vue(),
    // 自动导入的插件，解析器可以是 vant element and-vue 
    Components({
      dts: false,
      // 原因：Toast Confirm 这类组件的样式还是需要单独引入，样式全局引入了，关闭自动引入
      resolvers: [VantResolver({ importStyle: false })]
    })
  ],
1
2
3
4
5
6
7
8
9
10
11

• antd使用

npm i ant-design-vue@next
1

import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    .......其它plugins配置
    Components({
      resolvers: [
        AntDesignVueResolver(),
      ]
    }),
  ........其它plugins配置
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13

详细使用参考链接

7. mock配置

• 安装

pnpm i vite-plugin-mock mockjs -D
1

• 在 vite.config.ts 配置文件启用插件

import { viteMockServe } from 'vite-plugin-mock'
plugins: [
    viteMockServe({
     // mockPath 默认不配置地洞找src同级的目录
      mockPath: './src/mock',
      localEnabled: true
    })
]
1
2
3
4
5
6
7
8

//用户信息数据
function createUserList() {
    return [
        {
            userId: 1,
            avatar:
                'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
            username: 'admin',
            password: '111111',
            desc: '平台管理员',
            roles: ['平台管理员'],
            buttons: ['cuser.detail'],
            routes: ['home'],
            token: 'Admin Token',
        },
        {
            userId: 2,
            avatar:
                'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
            username: 'system',
            password: '111111',
            desc: '系统管理员',
            roles: ['系统管理员'],
            buttons: ['cuser.detail', 'cuser.user'],
            routes: ['home'],
            token: 'System Token',
        },
    ]
}

export default [
    // 用户登录接口
    {
        url: '/api/user/login',//请求地址
        method: 'post',//请求方式
        response: ({ body }) => {
            //获取请求体携带过来的用户名与密码
            const { username, password } = body;
            //调用获取用户信息函数,用于判断是否有此用户
            const checkUser = createUserList().find(
                (item) => item.username === username && item.password === password,
            )
            //没有用户返回失败信息
            if (!checkUser) {
                return { code: 201, data: { message: '账号或者密码不正确' } }
            }
            //如果有返回成功信息
            const { token } = checkUser
            return { code: 200, data: { token } }
        },
    },
    // 获取用户信息
    {
        url: '/api/user/info',
        method: 'get',
        response: (request) => {
            //获取请求头携带token
            const token = request.headers.token;
            //查看用户信息是否包含有次token用户
            const checkUser = createUserList().find((item) => item.token === token)
            //没有返回失败的信息
            if (!checkUser) {
                return { code: 201, data: { message: '获取用户信息失败' } }
            }
            //如果有返回成功信息
            return { code: 200, data: {checkUser} }
        },
    },
]
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

mock详细语法参考链接