前言

当使用vue-cli创建好一个vue项目之后，使用npm run build打包之后会生成一个dist文件夹，单纯打开dist/index.html的话会白屏。

查了vue官方文档之后发现dist目录需要启动一个http服务器来访问，用 file:// 协议直接打开 dist/index.html 是不会工作的。然后本地预览最简单的方式就是搭建一个node.js静态文件服务器。
这里我用的是express框架来搭建，用vscode编辑器来编辑，当然也可以使用cmd定位到项目文件夹下来执行命令

以下分两种情况来说明

1 情况1：vue-cli构建静态网页，没使用服务端数据接口api

这种情况是最简陋的情况，即将静态网页挂载服务器上，express只是搭建了一个服务器，没有任何写任何数据接口。

1.1 打包文件生成dist文件夹，

执行npm run build命令后会在当前文件夹下生成dist文件夹，这个就是打包出来的文件夹，可以整个给他移到新的文件夹下（个人习惯）

1.2 生成配置文件和服务端文件

vscode打开新文件夹后，

执行npm init -y命令来初始化package.json文件，

执行npm install express安装express框架，

当前文件夹下创建一个server.js用于搭建服务器

```const express =require('express')
const app =express()
//传递一个包含静态资源的目录dist给express.static中间件
app.use(express.static('dist'))
//发送index.html页面到域名,使得输入服务器地址后就是这个页面
app.get(/.*/,function(req,res){ 
   res.sendFile(__dirname,'./dist/index.html')})
创建一个端口号为8000的服务器并监听
app.listen(8000,()=>{    
console.log("服务器已启动")})```

再回到生成的packjson.json文件内，在scripts下添加一句快速执行脚本，当控制台输入npm start 就会执行node server.js文件

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"  //添加的是这句，其他的是自动生成的
},

（这句话不添加的话，直接用vscode编译器的执行命令右键Run Code或左上角的三角形图标也可以运行运行该文件，但是也不可能所有人都用vscode,所以还是加上吧）保存后执行执行servr文件后就可以控制台输出“服务器已启动”

在浏览器输入localhost8000就可以看到打包出来的静态页面了

1.3 最后附上执行各个命令时的目录变化

2 情况2：构建的是动态网页，有使用服务端数据接口

这种情况是比较普遍的情况，相对静态网页有很多要更改的东西。但是流程还是一样的。这里注明一下，我是服务端和前端内容写在同一个项目文件夹下的，开发模式下目录结构是这样的

2.1 打包前的修改

2.1.1 vue.config.js里面加入一句publicPath：‘/’。

这是部署应用包时的基本url,所有的资源都会被链接为相对路径

2.2.2 在router/index.js内声明VueRouter实例处，添加base:'./dist'

这是单页面应用的基路径，dist是打包后生成的文件夹名，可修改但是必须要一致。

这两个修改在开发模式上没有体现出作用，只有打包后才体现出来

2.2 打包并导出各个文件到新文件夹

这里也有个不同的地方，因为我的服务端文件和前端文件放在同个项目文件夹下，而且我服务端又安装了很多依赖和框架，

所以我复制黏贴了这下面5个文件到新文件夹，不然的话我就要在新文件夹下重新安装依赖和框架（控制台会提示缺少哪些），这样太麻烦了

但是如果有很多依赖安装后没用到的话，就建议不复制，而是根据情况一那样自己生成，目的是为了减小文件体积

附上此时的详细目录

2.3 配置文件和服务器端文件的修改

这里主要还是服务端文件的修改，配置文件只需要添加快捷语句就行

2.3.1 配置文件修改：

 "start": "node server/index.js",

这里就要添加路径了，因为目录相对情况1发生了变化

2.3.2 服务端文件的修改：

服务端主文件下传递静态文件夹，需要使用path模块。单纯使用相对路径的话会报错误。

不过发送index,html到域名倒是添不添加path模块都不影响

const express = require('express') // express框架 
const app = express()
//引入path模块
const path=require('path')
//传递静态文件夹dist。需要使用path模块
app.use(express.static(path.join(__dirname,'../dist')))
//发送index.html到域名
app.get(/.*/,function(req,res){
  res.sendFile(__dirname+'../dist/index.html')})
//这里省略了一些后端内容，因为相对这个问题用不到，主要是引入后台接口文件和解析http请求体等，内容会在后续文章（还没写）中提到
// 创建一个端口为3000的服务器并监听，这里可以直接使用app.lesten(xxxx,function)就行，我是其他模块需要用到才这么写
const http = require('http')
const server = http.createServer(app)
server.listen(3000, () => {
  console.log('success listen at port:3000')})

这里补充下，如果不使用path模块的话，直接使用app.use(express.static(__dirname,'../dist'))的话，会报插入脚本时错误，

个人猜测可能是这个时候路径的问题，但是不知道修改来修改去都解决不了，可能是猜测错了创建好后保存运行，浏览器输入localhost:端口号就可以访问打包好的vue文件了

2.4 留下的坑

我这个小项目的跨域代理是写在前端页面的vue.config,js里面，设置的是devServer,查了之后发现这个devServer是只能用于开发环境，生产环境是不可以使用的。但是我打包后运行发现用到的接口没有出现跨域的问题。只是所有的get方法都报404错误，但是post方法全都可以正常使用。花了一个多小时还是没找到解决方法，只能把所有的get方法改成post方法。希望知道的大佬帮我解决这个问题。

Vue+node express打包部署，本地预览

前言