vite.config.ts配置别名、环境变量、svg图标配置

csdnmingzai

已于 2024-09-03 09:52:13 修改

阅读量595

点赞数 3

文章标签：前端

于 2024-09-02 11:39:00 首次发布

本文链接：https://blog.youkuaiyun.com/csdnmingzai/article/details/141340286

版权

1、配置别名

1.1、在 vite.config.ts 内部添加 path、resolve等代码

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import path from 'path'

// https://vitejs.dev/config/

export default defineConfig({

plugins: [vue()],

resolve: {

alias: {

"@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src

}

}

})

1.2、TypeScript编译配置 tsconfig.json，在内部添加 baseUrl 与 paths

{

"compilerOptions": {

"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录

"paths": { // 路径映射，相对与 baseUrl

"@/*": [

"src/*"

]

}

},

}

2、项目环境变量的配置

2.1、在项目根目录创建开发、生成和测试环境的文件

.env.development

.env.production

.env.test

2.2、在任意文件内部编写如下例子

# 变量必须以 VITE_ 为前缀才能暴露为外婆读取

NODE_ENV = "test"

VITE_APP_TITLE = "CRM"

VITE_APP_BASE_API = '/test-api'

VITE_SERVE = "http://zzzz.com"

2.3、配置运行命令：package.json

通过 import.meta.env获取环境变量

"scripts": {

"dev": "vite --open",

"build:test": "vue-tsc -b && vite build --mode test",

"build:pro": "vue-tsc -b && vite build --mode production",

"preview": "vite preview",

},

3、svg图标配置

3.1、安装SVG依赖插件

pnpm install vite-plugin-svg-icons -D

3.2、在 vite.config.ts 中配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

import path from 'path'

// https://vitejs.dev/config/

export default defineConfig({

plugins: [

createSvgIconsPlugin({

// Specify the icon folder to be cached

iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],

// Specify symbolId format

symbolId: 'icon-[dir]-[name]',

})

],

})

3.3、入口文件导入 main.ts

import 'virtual:svg-icons-register'

3.4、使用。将所有svg文件放入到 src/assets/icons/ 下面。

svg：图标外层容易节点，内部需要与 use 标签结合使用。

xlink:href 执行用哪一个图标，属性值务必 #icon-图标名称

use 标签 fill 属性可以设置图标的颜色

<svg style="width: 30px;height: 30px;">

<use xlink:href="#icon-green" fill="red"></use>

</svg>

3.5、注册全局组件

3.5.1、在 src/components下面创建一个 index.ts 写入如下例子代码

// 引入项目中全部的全局鞍

import SvgIcon from "@/components/SvgIcon/index.vue"

import Example from "@/components/Example/HelloWorld.vue"

// 全局对象

const allGloblComponent = { SvgIcon, Example }

// 对外暴露插件对象

export default {

// 必须叫 install方法

install(app: any) {

// 注册项目全部的全局组件

Object.keys(allGloblComponent).forEach(key => {

// 注册为全局组件

app.component(key, (allGloblComponent as any)[key]);

})

}

}

3.5.2、在 main.ts 引入并使用

import { createApp } from 'vue'

import App from '@/App.vue'

// 引入全局组件

import gloalComponent from "@/components"

app.use(gloalComponent)

app.mount('#app')

4、继承 sass

项目中可以使用 scss样式，因为配置 styleLint 工具的时候，项目中安装过 sass sass-loader 因此组件内不可以使用 scss语法！！！需要加上 lang="scss"

<style scoped lang="scss">

4.1、在 src/styles 目录下创建 index.scss 文件，如果项目中需要用到 清除默认样式，就需要在index.scss 内引入 reset.scss。

从 npm官网搜索reset.scss，找到code直接赋值。并在 src/styles/reset.scss 粘贴

@import './reset.scss'

4.2、在入口文件引入 main.ts

import '@/styles/index.scss'

4.3、如果想要使用 $变量，需要在 src/styles/ 下创建 variable.scss 。且在 vite.config.ts 配置。

注意：'@import "./src/styles/variable.scss";' 后面的 ; 不要忘记，不然会报错

export default defineConfig({

css: {

preprocessorOptions: {

scss: {

javascriptEnabled: true,

additionalData: '@import "./src/styles/variable.scss";'

}

}

}

})

5、mock数据

5.1、安装依赖：https://www.npmjs.com/package/vite-plugin-mock

pnpm install -D vite-plugin-mock mockjs

5.2、在 vite.config.js 配置文件启动插件

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

export default defineConfig(({ command }) => {
return {
plugins: [
vue(),
viteMockServe({
mockPath: 'mock', // mock文件夹路径
enable: command === 'serve' // 只有开发环境才开启mock
}),
],
}
})

5.3、在根目录下创建 mock 目录，后续的mock接口都创建在mock目录下

function createUserList() {

return [

{

userId: 1,

avatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",

userName: "admin",

password: "111111",

desc: "平台管理员",

roles: ['平台管理员'],

buttons: ["cuser.detail"],

routes: ["home"],

token: "Admin 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 } }

}

},

]

5.4、axios测试mockjs

// 测试 mockjs 使用 axios

import axios from 'axios'

axios({

url: '/api/user/login',

method: "post",

data: {

userName: "admin",

password: "111111"

}

})

6、封装 axios

6.1、安装 axios 依赖

pnpm install axios

6.2、在src文件夹下新建utils/request.ts

// utils/request.ts

import axios from "axios";

//创建一个axios实例
const request = axios.create({
baseURL: '',
timeout: 20000,
});

// 添加请求拦截器
request.interceptors.request.use(
function (config) {
// 请求地址携带时间戳
const _t = new Date().getTime()
config.url += `?${_t}`

// 请求头携带token
config.headers['token'] = localStorage.getItem('token') || ''

// 在发送请求之前做些什么
// console.log('我要准备请求啦------')
// console.log(config, '请求配置')

return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);

// 添加响应拦截器
request.interceptors.response.use(
function (response) {
// 对响应数据做点什么
// console.log('我接收到响应数据啦------')
// console.log(response, '响应配置')
if (response.status === 200) {
return Promise.resolve(response.data)
} else {
return Promise.reject(response)
}
},
function (error) {
// 对响应错误做点什么
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '错误请求';
break;
case 401:
error.message = '未授权，请重新登录';
break;
case 403:
error.message = '拒绝访问';
break;
case 404:
error.message = '请求错误,未找到该资源';
break;
case 405:
error.message = '请求方法未允许';
break;
case 408:
error.message = '请求超时';
break;
case 500:
error.message = '服务器端出错';
break;
case 501:
error.message = '网络未实现';
break;
case 502:
error.message = '网络错误';
break;
case 503:
error.message = '服务不可用';
break;
case 504:
error.message = '网络超时';
break;
case 505:
error.message = 'http版本不支持该请求';
break;
default:
error.message = `未知错误${error.response.status}`;
}
} else {
error.message = "连接到服务器失败";
}
return Promise.reject(error);
}
);

/*
* get请求:从服务器端获取数据
* url:请求地址
* params:参数
* */
export function get(url:string, params = {}) {
return new Promise((resolve, reject) => {
request({
url: url,
method: 'get',
params: params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}

/*
* post请求:向服务器端提交数据
* url:请求地址
* params:参数
* */
export function post(url:string, params = {}) {
return new Promise((resolve, reject) => {
request({
url: url,
method: 'post',
data: params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}

// 对外暴露请求方法
export default {
get,
post
}