新网站开发营销策划公司介绍
路径解析配置 webpack
安装 craco
npm i -D @craco/craco
项目根目录下创建文件 craco.config.js ，内容如下
const path = require('path')
module.exports = {webpack: {// 配置别名alias: {// 约定： 使用@ 表示src文件所在路径'@': path.resolve(__dirname,'src')}}
}
包文件中配置启动命令和打包命令
经过以上配置，可以用@/home 替换 ./home , 但输入 @/ 时没有给出路径下 文件名提示
创建 jsconfig.json 文件， 内容如下：
{"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"]}}
}
路径解析配置 Vite
修改Vite配置
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path';export default defineConfig({plugins: [react()],resolve: {alias: {'@': resolve(__dirname, 'src')}}
})
提示：找不到模块‘path’，需安装
npm i @types/node -D
还需配置 jsconfig. json
{"compilerOptions": {"jsx": "react","baseUrl": "./","paths": {"@/*": ["src/*"]}},}