vue cli 3.X项目打包本地查看、上线（nginx反向代理\history模式\微信白屏）

首先本地查看

先了解vue.config.js配置项中的publicPath（官网上说的是这个名字，但是用这个名字打包时会非法错误，最后还是用的baseUrl）

部署时官网上说

如果你已经将 publicPath 配置为了一个相对的值，那就可以直接本地预览（但是不能访问后台接口，只能展示静态页面）

由此可知如果你路由里配置成HTML5 History 模式，那是不能使用相对路径的

const router = new VueRouter({
    // mode: 'history',   
})

如果不用history模式，直接打开dist里的index.html也会报一些找不到静态资源的错误，此时只需将绝对路径改为相对路径，如：

<link rel="stylesheet" href="/css/reset.css">
改为
<link rel="stylesheet" href="./css/reset.css">

官网还说可以启动一个HTTP服务器来访问，但是我用了不成功，试用了另一种方法
执行

npm install http-server -g

在dist文件夹中运行

http-server

使用其中一个地址就可以看到项目的静态页面了。

下面就是打包到服务器了

一般如果vue框架的程序上传到网站服务器的根目录下(我认为只要dist放在根目录下)是不 会有问题的，也不存在资源文件引用错误的情况，但如果你不是根目录，那就需要小心啦：
比如开发时你用绝对路径引入资源

<link rel="stylesheet" href="/css/reset.css">

而打包的代码不在服务器根目录下，如

www/
 +hh/
  +dist/
   +css/
        -reset.css
    +index.html

会出现找不到文件的错误，我的解决方案是

baseUrl: './',  //相对路径

另外，修改vue.config.js文件下的host：

devServer: {
        host: '0.0.0.0'
    }

然后修改package.json中script下dev的值，在后面加入–host 0.0.0.0

"scripts": {
    "dev": "--host 0.0.0.0",
  },

web服务器我用的是nginx，使用方便而且可以反向代理解决跨域问题：

在vue.config.js中配置的

devServer: {
        proxy: {
            '/api': { //匹配所有以‘/api’开头的请求路径
                target: 'http://61.181.123.70', //代理目标的基础路径
                changeOrigin: true, //支持跨域
                pathRewrite: { //重写路径：去掉路径中开头的'/api'
                    '^/api': ''
                }
            }
        },
    }

这种跨域配置只适合开发环境，想要在生产环境实现跨域其中一种方法是nginx反向代理，下面就说说我自己在这里踩的坑

其中server_name我这里用的是localhost，或者127.0.0.1，都是代指本机，
设置代理转发的http地址要注意的是，如果web服务器和后端服务器一个IP地址，那么此处只能用192.168.0.227（本机IP地址，我试了127.0.0.1不行），如果不是一个IP，那就写后端服务器的IP地址

当使用 history 模式时，URL 就像正常的 url，例如 http:/yoursite.com/user/id，但需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404
nginx配置

location / {
   try_files $uri $uri/ /index.html;
}

这样在我的项目里转发文章也是可以的。
另外也可以匹配错误页

location /{
　　root   /data/nginx/html;
　　index  index.html index.htm;
　　error_page 404 /index.html;
}

上线后其他浏览器都可以正常运行，但微信浏览器出现白屏现象，可以参考我这篇文章

参考文章
vuejs怎么在服务器部署？
Nginx Windows详细安装部署教程
项目配置使用vue-cli3升级