react实战启动本地服务报错start: `node -r dotenv/config app.js`原因

最新推荐文章于 2024-05-16 15:11:29 发布
最新推荐文章于 2024-05-16 15:11:29 发布
阅读量856 收藏
点赞数
分类专栏： 学习笔记 文章标签： react.js javascript r语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39011682/article/details/121686584
版权
博客内容讲述了作者在运行npm start时遇到的问题，包括nodemon的使用和环境变量未设置导致的错误。通过修改package.json中的start命令并创建.env文件来设置JWT_SECRET环境变量，解决了应用启动时的报错。重点在于理解和正确配置.env文件以及环境变量对于Node.js应用的重要性。
摘要由CSDN通过智能技术生成

package.json文件是这样的在这里插入图片描述一开始运行start报错，全局安装了nodemon,npm install -g nodemon ,安装完成后再npm run start还是报错在这里插入图片描述
可能是我电脑的原因。后来把package.json中的start命令nodemon改为node
在这里插入图片描述
改完之后报了其他错误了
在这里插入图片描述
意思是node_modules下的express-jwt\lib\index.js:20行
在这里插入图片描述这里要传入一个options对象并且这个对象要有secret这个值，否则抛出错误，传入这个对象的地方是在报错的auth.js文件下
在这里插入图片描述

在这里插入图片描述
这里调用是传了secret但是还是报错了，
**

重点在这： 说明process.env.JWT_SECRET没用值，是因为没有.env文件

**，加上就好了
在这里插入图片描述
.env文件DB_HOST=localhost DB_NAME=ecommerce DB_USER= DB_PASS= DB_PORT=27017 APP_PORT=80 NODE_ENV=development JWT_SECRET=test ORDER_SECERT=test

椰子糖YZT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
dotenv与config配置全局变量
05-16
# 前端与node侧关于全局变量读取的配置 ## 1、dotenv - 前端 或 node 都可以使用 ``` shell # 使用 dotenv 读取 .env 文件 # 安装 pnpm init pnpm i dotenv # 配置 # 1、在项目根目录创建 .env 文件 # 2、在 .env 文件中配置环境变量 # 3、在代码中使用 process.env.变量名 读取环境变量 # 4、在 package.json 中配置 scripts # 5、运行命令 node ./index.js # 6、在命令行中查看环境变量 # 7、在代码中使用 process.env.变量名 读取环境变量 ``` ## config 配合 js-yaml - node 侧 进行使用 ``` shell pnpm init pnpm i config js-yaml ```
@babel中使node.js可以支持ES6，jsx语法（create-react-app中配置）
01-20
在本篇文章中，我们将探讨如何在`create-react-app`项目中配置Babel，使得Node.js能够理解并执行ES6和JSX语法。 首先，我们看到在`package.json`的`dependencies`部分，列举了几个关键的Babel包，包括`@babel/cli`...
react 启动报错
小耳朵晨晨
03-11 278
先用npm install 如果有没有拉取成功的就是cnpm install (需要先装一个cnpm国内镜像)。 npm start 还是失败 ： 项目根目录创建一个.env文件。 文件中写 ：SKIP_PREFLIGHT_CHECK=true ...
dotenv配置并加载环境变量
星环
04-16 1526
dotenv是一个不依赖任何模块的环境变量加载器，它从.env文件中加载变量到上这样就可以将项目的代码和环境配置分开存储。这是基于理论实现的。软件通常会作为一种服务来交付，即软件即服务(SaaS Software as a Service)。
【Node】Node的配置文件的使用，dotenv框架的使用
m0_56132701的博客
04-09 891
🌻 从许多项目中发现，项目的重要配置好像都写着.env文件中，所以就想理清楚.env文件是什么?，原理是什么?，这样写的好处是什么?，在记录下这篇博客之后。或者说按照博客操作一遍项目，对.env有一个更加清楚的了解。可以使用node项目启动的命令来配置环境变量的值，不同的启动命令会配置不同的环境变量，使用环境变量来条件判断读取不同的文件。根据文件的内容来总配置项目的环境变量的值，例如：数据库，端口等…
使用 dotenv 与 config 解析全局环境变量
最新发布
shmilynn_的博客
05-16 633
修改package.json中的dev与prod代码 去设置node对应的环境。官方文档的这样介绍 dotenv: Dotenv 是一个零依赖的模块，它能将。环境去读取默认的环境变量的同时，又有一些独立存在的全局变量 又该如何实现呢？中的全局变量并根据对应的环境使用不同的数据、对象的格式 ，我们可以通过。如果当前的环境和默认环境中的配置项重复，那么会以当前环境中的配置项为准。的方式去配置，已经可以满足我们大多数场景下对于全局变量的使用，会根据当前的环境来加载对应的配置文件。的方式取出所对应的值。
koa+ts+mysql后台开发——（三）使用dotenv加载配置信息
weixin_44308055的博客
05-19 1084
文章目录前言一、dotenv 的作用二、使用方法1、引包2、在项目根目录新建.env文件，并填写配置参数3、在其他ts文件中引入并使用三、config 的定义（便于整个项目的维护）总结 前言 1、用过vue-cli脚手架的都知道，在根目录下面可以自定义 .env文件，也可以自定义 .env.dev 、.env.prod 等等文件，在package.json的scripts 指定即可。 2、vue-cli3的环境变量参数其实是使用了dotenv插件。nodejs环境并不会自带该插件。 一、dotenv 的作
create-express-app:创建Node.js应用程序
03-07
在IT行业中，Node.js是一个非常流行的后端开发框架，它基于Chrome V8引擎，使得JavaScript能够在服务器端运行。Express.js是Node.js上最常用的应用程序框架，极大地简化了构建Web应用的过程。本教程将深入探讨如何...
bulletin-board:由Lynda教程构建的React.jsNode.js Web App，用于学习React.js
05-02
【React.js与Node.js简介】 React.js是Facebook开发的一个开源库，主要用于构建用户界面，特别是单页应用程序（SPA）。它采用组件化的方式构建UI，使得代码可复用性高，维护性和性能优秀。React.js的核心理念是声明...
react-config-app:使用React的Demo Config App
05-23
在本文中，我们将深入探讨如何使用React开发一个配置应用，以"react-config-app"为例。React是Facebook开发的一个流行的JavaScript库，用于构建用户界面，尤其是单页应用（SPA）。通过React，开发者可以创建可重用的...
Node-React-with-JWT-Authenticaton-and-reflecting-XSS:具有JWT Authenticaton并反映XSS的NodeReact
04-07
cd ./node-js-jwt-auth node server.js 运行React应用程序： cd ./react-jwt-auth npm start 基本API： 该Web应用程序具有一个简单的api，用于注册（创建）用户并登录，同时为已登录的用户提供一个JWT令牌，该...
dotenv的使用：一、基本功能的介绍和说明
一名全栈开发工程师
04-15 3152
dotenv是一个零依赖的模块，它的主要功能是从.env文件中加载环境变量,这篇文章介绍dotenv的基础使用。
Nodemon 简介、安装、使用和配置
qq_44741577的博客
03-04 6106
"watch": ["config/","router/","utils/","views/","app.ts","index.ts"],],–restartable：设置重启命令，默认是 rs；–verbose：是否输出重启的详细信息，布尔值，默认false；–watch：监视文件或文件夹的路径，数组，每个参数都指某个路径；–ignore：忽略监视的路径，默认忽略的是：.git，node_modules，bower–components，.sass-cache；
Node.js项目中动态加载环境变量配置
全栈开发师的博客
07-21 1819
NODE_MODULES：项目中动态加载环境变量配置 开始 在平时的 Node.js 项目开发中，我们需要在项目中添加各种各样的配置：服务端口、服务地址、图片上传、数据库、Redis 等等。 通常情况下我们会在项目的根目录中添加config.js或者config.json配置文件，然后在需要使用到的时候，在项目中require配置文件。 module.exports = { SERVER: 'https://www.example.com', PORT: 7890, REDIS: '127.0.
React学习（一）——React项目启动
GIN0913的博客
08-21 4386
学习目标：（1）搭建和启动一个新的React项目（2）认识React项目中的目录。
Linux系统搭建pm2环境管理node进程
qq_45058939的博客
07-11 513
PM2管理node进程的环境搭建以及配置讲解
# react本地配置启动应用 请求后台接口配置
weixin_43999634的博客
03-17 878
【代码】【无标题】
react项目启动加载过程个人笔记(Ant Design Pro)
BHSZZY的博客
01-04 3535
1.项目启动后，会先加载。（PS：菜鸟教程说，manifest.json 指定了开始页面 index.html，一切的开始都从这里开始，所以这个是代码执行的源头；但是Ant Design Pro项目里开始页面并没有在这里指定…）2.项目启动后，会打开。（可以修改默认启动端口，例如修改的启动命令为）3.项目会加载config.js，其中引入了；因为在里配置了，因此父页面就是4.在里配置了，以及，因此会重定向到，此时父页面是，子页面是5.父页面里有{children}，这个就可以让子页面显示出来。6.
【TypeScript】怎样使用环境变量包dotenv？
纠缠AI的亮子
05-08 1985
首先安装： npm i dotenv npm i -D @types/dotenv 创建.env文件，写入环境变量 PORT=3011 使用环境变量： import 'dotenv/config'; const port = process.env.PORT
"next": "^11.0.1"+"antd":"4.23.0"报错：./node_modules/antd/es/badge/style/index.less Global CSS cannot be imported from within node_modules.
05-22
这个错误是因为你尝试从 `node_modules` 中引入全局 CSS 文件，而 Webpack 默认不允许这样做。你可以通过在 Webpack 配置文件中添加一些选项来解决这个问题。 在 `webpack.config.js` 中，添加以下代码： ```javascript module.exports = { // ... module: { rules: [ // ... { test: /\.less$/, use: [ // ... { loader: 'less-loader', options: { lessOptions: { javascriptEnabled: true, }, }, }, ], }, ], }, // ... }; ``` 这段代码将启用 JavaScript 解析 Less 文件，并将其转换为 CSS 文件。由于这是全局 CSS 文件，因此需要将 `less-loader` 改为 `style-loader` 和 `css-loader`。 如果你在使用 `create-react-app`，则可以通过在 `package.json` 中添加以下内容来解决这个问题： ```json { "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "antd": "^4.23.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "style": { "modules": true, "sourceMap": true, "importLoaders": 2, "localIdentName": "[name]__[local]___[hash:base64:5]" } } ``` 这将启用 CSS modules，并为它们生成局部类名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值