1. 配置vite.config.ts //由于node.js暂不支持ts,需要先安装@types/node,才能使用path模块 //npm install @types/node -D import { resolve } from "path"; ... module.exports = { ... resolve: { ... alias: { "@api": path.join(__dirname, 'api'), "@utils": path.join(__dirname, '...
importutilsfrom'@utils' vite.config.ts配置 // ...resolve: {// 配置别名alias: {'@': path.join(__dirname,'./src'),'@components': path.join(__dirname,'./src/components'),'@utils': path.join(__dirname,'./src/utils') } },// ... 配置tsconfig.json {"compilerOptions": {"target...
需要注意的是:vite.config.ts里面每加一个alias,ts.config里面也得加下
import{createRouter,createWebHistory}from"vue-router";constrouter=createRouter({history:createWebHistory('/dc'),// 这里指定基本URLroutes:[{path:'/HelloWorld',name:'HelloWorld',component:()=>import('@/components/HelloWorld.vue')},{path:'/home',name:'Home',component:()=>import('@/views/home...
vite项目,配置了路径的别名: {代码...} vscode的vetur报错,typescript提示没有了,但是实际项目运行无误。同样的代码在vue-cli里面效果如下:一切正常!vue-cli应该是默认配置了@符号的alias,而且我觉得这个...
通过合理配置Vite和TypeScript,我们可以轻松地在项目中使用别名,从而简化模块的导入,避免命名冲突,并提高代码的可维护性。然而,我们也需要注意遵循一些最佳实践。 以下面这个目录结构为例: 以vite为例,webpack也一样,vite.config.ts: import {defineConfig} from 'vite'import vue from '@vitejs/plugin-vue'import...
import { resolve } from "path" resolve: { alias: { '@': resolve(__dirname, 'src') // 兼容src目录下的文件夹可通过 @/components/HelloWorld.vue写法 } }, 此时可能会出现以下找不到模块的错误: 解决办法: $ npm install --save-dev @types/node ...
从我最初接触vue3版本到现在已经有一年的时间。由于 vue3.2 版本的发布,<script setup> 的实验性标志已经去掉,已经陆陆续续有不少公司开始使用vue3.2开发项目了。这篇文章就来帮助大家如何快速使用vue3.x,typeScript,vite搭建一套企业级的开发脚手架 。废话不多说,直接上手开搞 ...
yarn add @typescript-eslint/parser --dev 注意: 如果eslint安装报错: 可以尝试运行以下命令: yarn config set ignore-engines true 运行成功后再次执行eslint安装命令 项目下新建 .eslintrc.js 配置eslint 校验规则: module.exports = { root: true, ...
alias: { react: require.resolve('react') } }) }) 1. 2. 3. 4. 5. 6. 7. 8. 官方推荐的用法是在 config 钩子中返回一个配置对象,这个配置对象会和 Vite 已有的配置进行深度的合并。不过你也可以通过钩子的入参拿到 config 对象进行自定义的修改,如下代码所示: ...