Next.js + TS 从零开始写一个前端导航页面（三、添加路径别名）

时间：

分类：

nextjs

字数：

266 字

时长：

大约需要 1 分钟

次数：

0 人阅读

webpack 时代，总不能写一大堆 ../../ 不是，所以需要添加路径别名。

原理

还是得利用 webpack 的 alias 来配置别名，修改 next.config.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const path = require('path');

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname),
      'components': path.resolve(__dirname, 'components'),
      'sass': path.resolve(__dirname, 'sass'),
      'static': path.resolve(__dirname, 'static'),
    };
    return config;
  },
};

如果是 TS 环境，还得改下 tsconfig.json，新增以下内容：

注意：修改配置之后，需要重启 VsCode 编辑器，否则引入路径还是会报错。

1
2
3
4
5
6
7
8
9
10
11
12
{
  "compilerOptions": {
    "rootDirs": ["."],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
      "components/*": ["./components/*"],
      "sass/*": ["./sass/*"],
      "static/*": ["./static/*"],
    },
  },
}

注意：配置中的 "components/*": ["./components/*"], ，其中 ./components/* 前面的 ./ 一定不能少！

如此，在 next.js 便可以愉快的使用路径别名开始撸代码了。

如：pages/index.tsx

1
2
3
4
5
6
import Head from 'components/Head/Head';

export default () => <div>
  <Head/>
  Welcome to next.js!
</div>
本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-04-29/next-alias/

如果您觉得文章不错，可以点击文章中的广告支持一下！