Once the code is packaged and optimized, the front-end’s job is done. If you want to simulate your own product launch, we can deploy it to your native Node.js environment

1. Create a Web service folderhrServer

2. Initialize NPM in this folder

npm init -y
Copy the code

3. Install the server framework KOA (also availableexpressOr an egg)

npm install koa koa-static
Copy the code

4. Create a public directory in hrServer and copy the packaged directoryDist ContentsAnd to thehrServer/public 下

5. Create app.js in the root directory

const Koa  = require('koa')
const serve = require('koa-static');

const app = new Koa();
app.use(serve(__dirname + "/public")); // Static the code under public
app.listen(3333.() = > {
  console.log('Project start: Port 3333')})Copy the code

6. Run the following command to change the IP address to your own IP address +3333 port

node app.js
Copy the code

7. Resolve the problem of accessing the History page

Install koA middleware

NPM install koA2-connect-history-api-fallback # middleware specifically for handling history modeCopy the code

Registered middleware

app.js

const Koa  = require('koa')
const serve = require('koa-static');
+ const { historyApiFallback } = require('koa2-connect-history-api-fallback');
const app = new Koa();
// All requests except the interface are sent to index.html
+ app.use(historyApiFallback({ 
  whiteList: ['/api']}));// There is a whiteList

app.use(serve(__dirname + "/public")); // Static the code under public

app.listen(3333.() = > {
  console.log('Human Resources Programme Launch')})Copy the code

At this point, the problem of refreshing 404 is solved (note: if you click on login, remember to clear cookies and test again).

8. Solve cross-domain problems in production environment in nodeJS environment

The problem

At this time, we click login, the interface is not working, we need to configure cross-domain in the production environment, the principle is the same as we used vuE-CLI configuration before, through the intermediate server to proxy the real interface through forwarding

Modifying environment Variables

.env.production

VUE_APP_BASE_API = '/api'
Copy the code

9. Install the cross-domain proxy middleware

npm install koa2-proxy-middleware
Copy the code
const Koa  = require('koa')
const serve = require('koa-static');
const { historyApiFallback } = require('koa2-connect-history-api-fallback');
const proxy = require('koa2-proxy-middleware')
const app = new Koa();

app.use(proxy({
  targets: {
    '/api/(.*)': {
        target: 'http://ihrm-java.itheima.net'.// Back-end server address
        changeOrigin: true}}}))// All requests except the interface are sent to index.html
app.use(historyApiFallback({ 
  whiteList: ['/api']}));// There is a whiteList
app.use(serve(__dirname + "/public")); // Static the code under public

app.listen(3333.() = > {
  console.log('Project start')})Copy the code