vite配置alias

vite.config.js 别名配置

resolve.alias
类型： Record<string, string> | Array<{ find: string | RegExp, replacement: string }>

将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象，或一个 { find, replacement } 的数组.

当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会被原封不动地使用，因此无法被正常解析。

更高级的自定义解析方法可以通过插件实现。

import {defineConfig} from 'vite'
import path from "path";    //path引入可能报错可以使用 import {resolve} from 'path'
import vue from '@vitejs/plugin-vue'//方法一export default defineConfig({plugins: [vue()],resolve:{alias:{'@':'/src/',      //格式一定要写对喽不然没有代码提示或者报错}}
})//方法二
export default defineConfig({resolve: {alias: {"@": path.resolve(__dirname, "src"),"components": path.resolve(__dirname, "src/components"),"styles": path.resolve(__dirname, "src/styles"),"plugins": path.resolve(__dirname, "src/plugins"),"views": path.resolve(__dirname, "src/views"),"layouts": path.resolve(__dirname, "src/layouts"),"utils": path.resolve(__dirname, "src/utils"),"apis": path.resolve(__dirname, "src/apis"),"dirs": path.resolve(__dirname, "src/directives"),},},plugins: [vue()],
});//或者 数组的形式import {defineConfig
} from 'vite'
import path from "path";
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({resolve: {alias: [{find: '@',replacement: path.resolve(__dirname, 'src')},{find: 'components',replacement: path.resolve(__dirname, 'src/components')}],},plugins: [vue()],
});

注意使用别名后一定要在tsconfig.json中配置

{"compilerOptions": {..."baseUrl": "./","paths": {"@/*": ["./src/*"]     //格式一定要写对符号*不能少不然找不到@或者没有代码提示}},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],"references": [{ "path": "./tsconfig.node.json" }],}

官网链接

vite配置alias相关推荐

Vite 配置 cdn 加载资源
一.介绍上篇文章我们从零配置 Vite + Vue3.0 开发环境.生产环境,本篇文章我们配置 CDN 加载.因为 Vite 不会重写从外部文件导入的内容,我们需要使用支持 ESM 编译的 CDN. ...
vite配置别名，并处理报错：找不到模块“xxx”或其相应的类型声明
vite配置别名,并处理报错:找不到模块"xxx"或其相应的类型声明 1.配置vite.config.ts文件 2.配置tsconfig.json文件 1.配置vite.confi ...
nginx vue2+webpack 和 vue3+vite 配置二级目录访问
首先我们要配置一个106.13.0.11:8083/qfqzApp的二级路由,针对于vue2项目,我们需要进行一下操作. 1.nginx配置(vue2 和 vue3配置的nginx相同) server ...
vue3+vite配置svg文件的全局使用（想怎么改颜色、宽高都可以）
前言 1.你是否遇到UI给你切双份icon图(正常显示颜色.高亮显示颜色)?我们前端小伙伴还得做交互引入两个图片,以后修改颜色又要换?好麻烦呀~~~ 2.是否遇到有时候下载svg下来,想随意更改颜色遇 ...
react-create-app 配置alias别名
首先找到项目的配置文件config, 然后再paths.js中配置自己想要的路径,下图红色部分是我自己添加的一个然后再webpack.config.js的resolve中配置alias别名
关于vite配置postcss未生效问题
vite配置自动补全样式插件postcss非常简单. 首先,第一步: cnpm postcss postcss-preset-env -D 安装第二步: 在项目根目录下新建文件postcss.con ...
webpack 配置 alias
webpack 配置 alias 后很方便,有时有我们项目比较大,比较复杂的时候尤为重要 const path = require('path'); const resolvePath = relat ...
vite配置gzip压缩
vite配置gzip压缩前段时间由于贫穷,用了家里的电脑做服务器,白嫖了同事的frp,映射到同事的服务器,达到可以公网访问的目的,预感到frp相对会慢一点点,没想到这么慢 ,发现vite打包后的部分 ...
vue3+vite配置项目运行前eslint检查以及git提交前eslint检查的方案总结
vue3+vite配置项目运行前eslint检查以及git提交前eslint检查的方案总结 1.需求背景最近在新项目搭建过程中有这样一个需求:由于是团队协同开发,所以在开发是代码规范是一个很重要的环 ...

vite配置alias

vite配置alias相关推荐

最新文章

热门文章