Vue项目线上部署常见问题

出现空白页，丢失资源，路由刷新404等问题

解决办法一般为vue.config.js修改配置，默认配置的路径资源打包后请求不到：

const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
  publicPath: isProduction ? './' : '/'
}

任何放置在 public 文件夹的静态资源都会被复制到 outputDir 对应值的目录下（默认 'dist'），如果用绝对路径来引用，不会被 webpack 处理(资源只存在 1 份)；如果用相对路径来引用，会被 webpack 处理，将图片重新打包，并给图片加 hash 值，以便更好的控制缓存。资源会存在 2 份(还有第一条复制的 1 份)。 所以引用 public 文件夹的静态资源建议使用绝对路径，注意配置路径 publicPath 前缀。

// vue
<img :src="`${publicPath}logo.png`">
....
data () {
  return {
    publicPath: process.env.BASE_URL,
  }
}

刷新404是服务端配置问题，而且是使用history路由模式才会有的问题，这里我贴的是Nginx的配置：

location / {
    root   /home/xxx/xxx; # web项目地址
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;  # 这个配置是关键
    
    # $document_root = root = /data/www/webproject

    # 若: try_files $uri $uri/ /crmwap/index.html =404; fall back 如下:
    # $document_root$uri --> $document_root$uri/ -->  $document_root/crmwap/index.html --> nginx 404

    # 若：try_files $uri $uri/ /crmwap/index.html; fall back 如下:
    # $document_root$uri --> $document_root$uri/ --> http://domain.com/crmwap/index.html
}

如果使用hash模式：

location ^~ /xx/
{
  root /home/xxx/webproject;
  index  index.html index.htm;
}

跨域问题，如果服务端为node，可以简单设置下请求头：

app.all('*', (req: any, res: any, next: any) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type,Authorization');
    res.header('Access-Control-Allow-Methods', '*');
    res.header('Content-Type', 'application/json;charset=utf-8');
    next();
});

Nginx反向代理

场景：我只有一个服务器和一个玉米，使用tomcat运行着博客程序(blog.xxx.com)，现在我需要在这台服务器上再发布一个前端程序和服务端程序，这时候就需要用到代理。

最终我在这台服务器上有两个程序：blog.xxx.com 和 app.xxx.com ，而后端由于只提供api所以直接发布到一个没到的端口上 app.xxx.com:9999

首先域名DNS解析：app和blog两个主机记录到主机ip，blog还是放在我之前的tomcat服务器跑，只是端口被我改成了8080，接着就是Nginx的配置：

server {
    listen       80;
    server_name  app.xxx.com;

    location / {
        root   /home/xxx/webprojectapp;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}
server {
    listen       80;
    server_name  blog.xxx.com;

    location / {
        proxy_pass http://app.xxx.com:8080;
    }
}

这样访问app.xxx.com就是我发布的程序，而blog.xxx.com则被转发到8080端口。

同样，有更多的项目都可以继续这样部署：

    server {
        listen       80;
        server_name  admin.xxx.com;

        location / {
            root   /home/Web/ProAdmin;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }
    server {
        listen       80;
        server_name  h5.xxx.com;

        location / {
            root   /home/xxx/webprojecth5;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }

玉米解析的都是80端口但是实际访问的二级域名会被转发到相应的项目中去。