前端利用项目上线就是要用nodejs开启静态服务器资源，使服务启动起来，就像我们在vscode中运行了项目的代码，会有一个访问的地址像http://localhost:8080这样的地址，而我们要用nodejs开启静态服务有以下一些步骤，再之后就需要设置防火墙和安全组，其目的是让别人能够访问你的项目

1.打包前将模式修改为历史模式

const router = new VueRouter({
    mode : 'history',//history 模式路径就没有#号
    routes,
});
export default router;

2.修改请求方式

//对axios进行二次封装
import axios from "axios";
const request = axios.create({
// 请求配置参考: https://github.com/axios/axios#request‐config
// 根据不同环境设置 baseURL, 最终发送请求时的URL为: baseURL + 发送请求时写URL ,
// 比如 get('/test'), 最终发送请求是: /dev‐api/test
// baseURL: '/dev‐api',
    baseURL: "http://120.76.247.5:2002", //改成你的node接口
    timeout: 5000, // 请求超时
});

export default request; // 导出 axios 对象

3.打包项目

npm run build

4.开启静态资源服务器

1.创建server.js文件，server.js文件的实现方式有以下两个方式：

2.安装supervisor到全局`npm i supervisor -g`

3.安装server.js开启静态服务所需的依赖到项目的文件夹里面去，例如：express等等依赖。

4.执行supervisor server.js

方案一：用原生模块实现

let express = require("express");
let fs = require("fs");
let path = require("path");
//实例化
let app = express();
//开启静态资源服务器
app.use(express.static("./"));
//哈希 hash模式:带#号,history模式:不带#号(上线之后,刷新页面就会丢失主页)
//下面的代码是解决history模式刷新页面就会丢失主页问题的
app.use((req, res) => {
// 任何的请求返回index.html的内容
fs.readFile(path.resolve(__dirname, "index.html"), (err, data) => {
    res.set("Content‐Type", "text/html; charset=utf‐8");
    res.send(data);
    });
});
//开启服务 端口号：1000‐60000
app.listen(3001, () => {
    console.log("服务器已开启，请访问：http://localhost:3001");
});

方案二：用插件 connecthistoryapifallback解决

var history = require('connect‐history‐api‐fallback');
let express = require("express");
//实例化
let app = express();
//开启静态资源服务器6 app.use(express.static("./"));
app.use(history());
//开启服务 端口号：1000‐60000
app.listen(3001, () => {
    console.log("服务器已开启，请访问：http://localhost:3001");
});

5.接口的跨域处理cors设置主路由文件配置

//希望在这里查询数据，返回给前端，叫做路由 :主路由
const express = require('express');
const Router = express.Router(); //Router==app
//引入子路由
const projectRouter = require('./module/project');
// const uploadRouter = require('./module/upload');
const userRouter = require('./module/user');
//真实接口：有语义的 获取数据:get 提交数据：post 修改数据:put 删除数据：delete restful接口规范
/*
商品信息管理：
订单管理：
商品管理:
入库出库管理:
*/
Router.use((req, res, next) => {
    res.header("Access‐Control‐Allow‐Origin", "http://localhost:3001");
    res.header("Access‐Control‐Allow‐Headers","Content‐Type,Content‐Length, Authorization,Accept,X‐Requested‐With"
    res.header("Access‐Control‐Allow‐Methods","PUT,PATCH,POST,GET,DELETE,OPTIONS"
    next();
})
//子路由的选择
Router.use('/project', projectRouter);
// Router.use('/upload', uploadRouter);
Router.use('/user', userRouter);
module.exports = Router; //导出路由对象

6.设置防火墙和安全组

1.防火墙设置

控制面板>系统和安全>Windows Defender防火墙>高级设置>入站规则>新建规则-选择端口

这里注意，只需要开放前端的端口，因为我们只需要把前端给别人看，然后直接下一步，再取一个名字就好了，到这里这个防火墙就设置好了。

注：如果上面报错“打开高级安全Windows防火墙管理单元时出错” 则可以参考下面这篇文章 social.technet.microsoft.com/Forums/offi…

查看服务器端口是否开放成功cmd输入netstat -ano更多可以参考： 15dun.com/news/457.ht…

2.安全组设置

更多>网络和安全组>安全组配置>配置规则，检查是否有开放3001端口，如果没有开放则复制一份开放一下3001端口，然后保存就好了。

注意：腾讯云客服原话：您好，安全组和服务器需要在同一个地域才支持关联。另外轻量应用服务器不支持关联安全组，如果轻量应用服务器需要设置安全组的功能，请到控制台轻量应用服务的详情页中设置防火墙。

7.绑定域名

解析绑定域名到ip地址，一般购买域名需要备案，备案可能需要两个星期的时间，建议用ip地址访问就行了

8.访问

一定要记着是用公网去访问，用内网是访问不通的。

前端项目上线