在node环境中部署应用-history模式

崽崽ya
1,126 阅读4分钟

首先需要把路由状态改为history

const createRouter = () => new Router({
  mode: 'history', // require service support
...
})

然后需要修改生产环境中的baseUrl(.env.production),例如：

  VUE_APP_BASE_API = 'http://ihrm.itheima.net'

修改完之后，重新进行打包，然后在打包生成的dist文件下的index.html下运行起来项目。打开控制台看看网络中的地址是否与你配置的地址一致。我这里是

image.png

(因为修改了环境变量，所以地址就会变，在没有修改之前 发请求找的是本级的地址。)

同时，控制台会报一个跨域的错误：

image.png

接下来就需要部署应用。可以使用1 也可以使用2 这里主要描述1 的解决办法

  1. 使用koa框架部署 项目
  • 新建一个文件夹extral
  • 初始化文件夹(npm init -y)
  • 安装服务端框架Kao和koa-static
  • 把dist文件复制进文件夹,
  • 新建一个js文件app.js，写入服务器的代码

如下：

const Koa = require('koa')
//相当于中间件
const serve = require('koa-static')
//创建服务器对象
const app = new Koa()
//注册中间件
app.use(serve(_dirname+'./public')) //将public下的代码静态化
app.listen(3333, () => {
  //console.log('启动项目')
  //可以把log
 // 出来的文字改成一个地址 可以点击进入
  console.log('http://127.0.0.1:3333')
  
})

启动项目

node .\app.js

点击输出的地址http://127.0.0.1:3333 可以进入页面 这时页面显示not Fount，因为访问都是以发请求的方式进行的，但是服务器没有监听到，需要做的操作就是把__dirname 删除，把public改成./dist 让他http://127.0.0.1:3333 直接指向dist文件.这样就可以解决问题

const Koa = require('koa')
//相当于中间件
const serve = require('koa-static')
//创建服务器对象
const app = new Koa()
//注册中间件
app.use(serve('./dist')) 
app.listen(3333, () => {
  //console.log('启动项目')
  //可以把log
 // 出来的文字改成一个地址 可以点击进入
  console.log('http://127.0.0.1:3333')
  
})

整体代码结构如下：

image.png

  1. express服务器 可以进行资源托管，通过服务器地址 读取文件.

：需要下包

yarn add express

代码如下:

//1.导入模块
const express = require('express');
//2.创建服务器
let app = express();
app.get('/',(req,res)=>{
//会监听到根目录' / '’ 然后返回1111
  res.send('1111')
})
//可以进行托管  可以访问到public文件下的文件
//http://127.0.0.1:3333 指向public
app.use(express.static('./public'))
//3.开启服务器
app.listen(3000,()=>{
console.log('http://127.0.0.1:3333');
});

在部署完服务器之后，进入页面刷新会出现找不到页面Not found。

扩展一下下~~~

在hash模式刷新不报错原因：hsah不会发请求 所以不存在刷新找不到页面的问题. image.png

history刷新报错(显示not found)原因：history会发请求，他发请求的话 这个http://127.0.0.1:3333 地址 就会像服务器发请求，服务器会监听到 就会找不到

image.png

node解决history刷新报错办法：

安装koa中间件

npm install koa2-connect-history-api-fallback #专门处理history模式的中间件

注册中间件

const Koa = require('koa')
const serve = require('koa-static')
/*  解决history页面刷新出现404 */
const { historyApiFallback } = require('koa2-connect-history-api-fallback')
const app = new Koa()
// 这句话 的意思是除接口之外所有的请求都发送给了 index.html
app.use(
  // 设置白名单  只要请求地址中有api请求的 都进入白名单可以直接
  historyApiFallback({
    whiteList: ['/api'],
  })
) 
const proxy = require('koa2-proxy-middleware')

app.use(serve('./dist')) //将public下的代码静态化  http://127.0.0.1:3333=>dist
app.listen(3333, () => {
  console.log('http://127.0.0.1:3333')
})

接下来就要解决跨域问题(使用服务器解决)： 让这两个地址一致 image.png

image.png

修改环境变量(在项目的生产环境中修改)

VUE_APP_BASE_API = '/api'

安装跨域代理中间件插件(服务器的那个文件里安装)

npm install koa2-proxy-middleware

配置跨域代理

image.png

const Koa = require('koa')
const serve = require('koa-static')
/* 解决history页面刷新出现404 */
const { historyApiFallback } = require('koa2-connect-history-api-fallback')
const app = new Koa()
// 这句话 的意思是除接口之外所有的请求都发送给了 index.html
app.use(
  // 设置白名单  只要请求地址中有api请求的 都进入白名单可以直接
  historyApiFallback({
    whiteList: ['/api'],
  })
) 
const proxy = require('koa2-proxy-middleware')
app.use(
  proxy({
    targets: {
      '/api/(.*)': {
        target: 'http://ihrm.itheima.net', //后端服务器地址
        changeOrigin: true,
      },
    },
  })
)
app.use(serve('./dist')) //将public下的代码静态化  http://127.0.0.1:3333=>dist
app.listen(3333, () => {
  console.log('http://127.0.0.1:3333')
})

重新打包，再把项目中的dist 文件放入extral服务器那个文件中。 重新运行 打开网址即可看到你的项目.

avatar
文章
阅读
粉丝