1vue项目上线流程

①将vue项目里的代码打包。

打包目的：浏览器不认识vue文件和vue里的template标签和引入模块的js代码。所以要打包，将vue项目转为纯粹的html、js、css文件。

如果用脚手架写的项目，即可不用安装webpac包进行打包，和 用bable进行js代码的转换。直接用npm run build命令即可。

会自动创建一个dist文件夹存放打包好的文件。

②将打包后的文件放入服务器上部署

打包后的文件需要部署后通过http协议才能进行查看，本地file文件协议是无法查看的。

③使用node.js的express中间件框架创建一个微型服务器。

目的，部署打包后的文件。

创建文件夹publishDemo，使用npm init创建一个包描述文件，让其成为一个包。然后创建一个服务器主文件server.js

安装express包。npm i express

然后在server.js里引入该包。

const express = require("express");

const app=express();

//配置后端路由
app.get('/person',(request,response)=>{
    response.send({
        name:"张三 ",
        age:18
    });//给客户端返回响应

});

//设置端口监听
app.listen(5005,(err)=>{
    if(!err) console.log("服务器启动成功了");
});

微型服务器搭建完成后，将前端的静态资源放入该服务器所在根目录的一个文件夹里，一般叫static。
然后将vue脚手架生成的dist文件夹的文件放入里面即可。

然后再服务器文件里加一行代码，让服务器能找到静态资源。

//引入静态资源
app.use(express.static(__dirname+'/static'));

④访问

能正常访问

从路由根目录每次一点点击页面没有什么问题，因为没有走网络请求，也就是根本没有去访问5005端口的服务器要资源，全是前端路由来回跳转。因为之前在vue里用了vue_router插件配置了路由。但是，一旦来到了上图所示的路由，此时刷新就会报404错了，因为这个路径在服务器项目根目录里根本不存在。也就是(http://localhost:5005/home/message/detail?id=001&title=%E6%B6%88%E6%81%AF001)在服务器里根本没有，服务器里只有app.get('/person',，也就是只有/person这个路由，而服务器静态资源里也没有对应的资源。

因为vue项目里的router路由器配置项浏览器模式是 mode:"history",

，它会把后面的全部都当作路由的一部分一起通过http协议发送给服务器

所以就会报错。

解放方法1

去vue项目里，将路由的mode配置为hash，然后 重新打包，将文件重新放入服务器的静态资源文件夹 。

这样 ，即使在任何路由下，点击刷新也不会把#号后面的路由提交给服务器。也就不会报错了。

解放方法2

还是继续使用hostory模式，毕竟这样好看些

所以，这样要解决404就要 靠后端服务器解决，后端写一套路由，根据服务器里有的资源和路由，将你请求的路由和已有的进行匹配，用来表示哪些是属于前端路由的，哪些是后端资源路由 。

在node.js后端里有一个中间件，

打开https://npmjs.com/，搜索connect-history-api-fallback 插件，它专业用来解决 在nodejs服务器里面history404的问题。不用这个插件 在nodejs后端里只能一个一个写匹配，哪个是前端的路由 ，哪个是后端的路由，如果是前端的就返回指定东西。

回调nodejs服务器 ，输入指令安装npm install --save connect-history-api-fallback

然后去服务器主文件应用使用即可。