react、next.js引入路径修改_nextjs 修改浏览器路径

1.场景

项目中引入文件，通常是

import a from '../common/b'//表示src/common/b

有些公共组件更是嵌套多层，所以使用符号@/，表示src/的路径

使用

import a from '@/common/b'//表示src/common/b

2.react中使用

环境：

"react": "^17.0.1",

 "webpack": "4.44.2",

2.1在根目录中创建jsconfig.json文件，添加以下代码

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "jsx": "react"
  },
  "exclude": ["node_modules", "build", "config", "scripts"]
}

2.2在webpack.config.js中修改

查找alias，在其内部加入以下代码

"@": path.resolve(__dirname, "../src"),

3.next.js中使用

环境：

 "next": "10.0.5",

3.1在根目录下创建next.config.js文件，添加以下代码

const path = require("path");
module.exports = {
  webpack: (config) => {
    config.resolve.alias["@"] = path.resolve(__dirname);
    return config;
  },
};

3.2在根目录下创建jsconfig.json文件，添加以下代码

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [ "src/*"]
    }
  }
}