在通过ZEIT Now部署的Next.js应用程序中使用绝对导入

next.js React.js

老丝Pro

2020-03-23

在Next.js 9教程中，建议的导入共享组件的方法是通过相对路径，例如

import Header from '../components/Header';

我想使用绝对导入，例如

import Header from 'components/Header';

如何在本地以及使用Now CLI进行部署时如何进行这项工作？

使用教程中建议的设置，我的项目结构为：

my-project
├── components
├── pages
└── package.json

第2772篇《在通过ZEIT Now部署的Next.js应用程序中使用绝对导入》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答

村村 2020.03.23

有多种方法可以实现此目的，但是一种方法-不需要其他依赖项，也不需要太多配置-是将环境变量NODE_PATH设置为当前目录，即NODE_PATH=.。

1.使其在本地工作

我认为NODE_PATH=.在package.json本地（例如$ npm run dev或$ yarn dev）运行dev / build脚本时，最简单的设置方法是将其添加到的每个脚本中package.json：

"scripts": {
  "dev": "NODE_PATH=. next",
  "build": "NODE_PATH=. next build",
  "start": "next start"
},

2.部署时使其工作

当您部署到ZEIT Now时，NODE_PATH必须以其他方式进行设置。

您可以通过添加文件来添加部署配置（该now.json文件应与放在同一目录中package.json）。如果您还没有now.json文件，请创建它并添加以下内容：

{
  "version": 2,
  "build": {
    "env": {
      "NODE_PATH": "."
    }
  }
}

这告诉Now NODE_PATH=.在构建应用程序时使用（请参阅build.env）。

（它还告诉Now，我们使用的是Now平台版本 2，它是当前的最新版本（请参见version。当您使用部署时，忽略该版本会向您发出警告$ now。）

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android