Run the front-end project
write at the front
The laboratory computer needs to run a JAVA project with separate front-end and back-end, so we started to reconfigure it
It took 6 hours to configure the environment + modify the code for all (database + back-end + front-end). Including encountering various pitfalls, but overall there are not many detours
If you follow this blog, you can theoretically avoid the pitfalls I encountered hh
For front-end developers, we haven’t left anything out either. The article will introduce in detail how to install Node.js and run the front-end project, including how to deal with common errors and configuration issues. Through this article, you will not only be able to set up a complete Java project development environment, but also gain practical tips for dealing with potential problems.
let's start!
1. Install node.js
Node.js download address: https://nodejs.org/en
Just download version 20.10.0, and it will be installed by default after downloading
Enter node -v
on the command line after the installation is complete. If the version is displayed, the installation is successful
2. Run the front-end project
To run the front-end code and configure dependencies, you can follow the instructions provided in the README file. These instructions are usually for setting up the project, installing dependencies, running the development server, and building the production version.
Here is a basic step-by-step guide:
-
Make sure your computer has Node.js and npm installed.
-
Project setup: This is the first step to install the dependencies required for the project. You need to run
npm install
from the command line. This will install all required dependencies based on the dependencies listed in thepackage.json
file. -
Compiles and hot-reloads for development (Compiles and hot-reloads for development) : This step is to run the development server. With the command
npm run serve
, the project starts a local server and usually automatically reloads the page when the code changes. -
Compiles and minifies for production (Compiles and minifies for production): Use the
npm run build
command when you are ready to deploy the application to a production environment. This creates a compressed and optimized version, usually placed in the project'sdist/
orbuild/
directory.
Before you begin, make sure you are in the folder that contains your front-end code. This means that you should open the command line tool in the directory containing the package.json
file.
Here are the specific steps:
1. runnpm install
Run npm install
to install all dependencies.
2. runnpm run serve
For development, run npm run serve
. This usually starts a development server on a port on localhost (e.g. http://localhost:8080
).
Report an errorError: error:0308010C:digital envelope routines::unsupported
The error message you encountered is due to a version compatibility issue with Node.js. The errorError: error:0308010C:digital envelope routines::unsupported
is usually related to the version of the Node.js encryption library and OpenSSL. This issue is more common in Node.js 17 and above, especially when they are used with old or incompatible dependencies.
Method 1: Setup NODE_OPTIONS
(useless)
One way to resolve this issue is to enable these older encryption algorithms by setting an environment variable. You can allow the use of these algorithms by setting the NODE_OPTIONS
environment variable before running the project.
In Windows PowerShell, you can set this environment variable with the following command:
$env:NODE_OPTIONS = "openssl-legacy-provider"
set NODE_OPTIONS=--openssl-legacy-provider
Then try running your project again:
npm run serve
The benefit of this approach is that it requires no code or project configuration changes.
Method 2: Change Node.js version
If the above method doesn't work or you don't want to use the old encryption algorithm, you may consider downgrading Node.js to an older version, such as 16.x. Lower versions of Node.js do not suffer from this specific compatibility issue. You can easily switch versions of Node.js using NVM (Node Version Manager).
Method 3: Update dependencies (used this, successfully solved)
Sometimes, older versions of project dependencies may not be compatible with the latest version of Node.js. Checking and updating your project dependencies may help resolve this issue. Dependencies can be updated by running npm update
.
Method 4: Check webpack configuration
As mentioned in the errorwebpack
you may want to check and make sure your webpack configuration is compatible with the Node.js version you are using. Make sure the webpack and related loaders/plugins you use are up to date.
3. Runnpm run build
When you are ready to deploy the project to production, run npm run build
.
4. Front-end access
#账名
admin
#Mitsuko
666666
Running successfully!
If you have any questions, please ask and communicate!