node-简单使用node来部署项目

在一个项目要打包好的时候,我们可以通过使用node的方式简单上线。

那么，具体需要怎么做呢？

========================================================

1.首先，任意一个地方创建一个文件夹（node服务器）

比如：这个文件夹叫webServer（根据自己需要取名即可）

• 运行 npm init -y 来创建初始化

• 打开命令窗口下载koa 跟 koa-static npm i koa koa-static

• 在webServer根目录下创建一个public文件夹，用来存放打包后的文件（dist文件夹的内容）

• 在webServer根目录下创建一个app.js文件，作为服务器的启动程序

2.进行app.js文件的书写

const Koa=require('koa')
const serve=require('koa-static')
const app=new Koa()

//静态资源托管,__dirname为根目录地址（注意为2个_）
app.use(serve(__dirname+'/public'))

//设置node服务器的地址（可以根据自己的需要，设置端口号，不一定非得3001）
app.listen(3001,()=>{
    console.log('服务器开启成功，http://localhost:3001')
})

3.将打包后的静态文件复制到public中

4.如果你的项目中使用了history模式的问题（如果使用hash模式则可忽略）

至于使用了什么模式，可以到router文件下去查看

注意：如果使用了history模式，刷新会出现not found的情况，原因就是使用history打包后，在node上运行的时候，他匹配不到路径上的文件（如/localhost:3003/admin/login,在public是找不到这样的文件的)

解决方案：

• 下载 npm i koa2-connect-history-api-fallback
• 在上面的app.js引入

const  { historyApiFallback } = require('koa2-connect-history-api-fallback')


//注意，这里/prod-api是生产环境下的的VUE_APP_BASE_API，根据实际项目去更改
app.use(historyApiFallback({ 
    whiteList: ['/prod-api']
}))

5.请求跨域的问题处理

注意：我们项目中，在vue.config.js配置的proxy跨域代理是开发环境的配置，但是现在的生产环境，打包处理的，所以跨域代理要另外处理，并且是在node服务器，app.js上添加

解决方案：

• 下载 npm i koa2-proxy-middleware

• 在app.js中引入

const proxy = require('koa2-proxy-middleware')

app.use(proxy({
  targets: {
    // (.*) means anything
    '/prod-api/(.*)': {
        target: 'http://localhost:3000/api', //后端服务器地址
        changeOrigin: true,
        pathRewrite: { 	
            '/prod-api': ""
        }
    }
  }
}))

这样，我们就可以进行跨域请求啦！！！

最后，附上整个app.js的内容图

收工！