vue项目部署到nginx

关于vue-cli3.0项目部署到nginx上的问题

vue-router mode的选择（hash、history）

1、hash（页面跳转出错）

先说hash吧，大家都知道用了这个模式，我们浏览器上方的地址会出现一个“#”会很难看，但我前期因为部署到nginx后一直丢失页面，最后用了hash后解决了，想着难看就难看一点吧，后面测试的时候发现，凡是用了window.open,layer.open这些方法去跳转页面的地方，都链接到了另一个前端页面（nginx上部署了两个前端页面），最后还是要用history。

2、history

这个模式下的，感觉更需要配置好nginx，直接上代码

// user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;//这一行对于history 来说非常重要
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

vue.config.js文件配置

当时真的是看了不少文档，发现了两种是vue-cli3.0版本的（首先要确定自己用的是什么版本），但并不是都能用的，要看好自己用的版本号，下面的是vue-cli 3.3版本的才能用（看文档得来的结论，真实性因为版本不够没测试）

 publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
 outputDir: "dist",    //打包的目标目录
 assetsDir: "static",
 indexPath: 'index.html',
   devServer: {
        open: true,

这下面呢，是我自己用的版本vue-cli3.0.4版本的。

    // 基本路径
    publicPath:"./",
    // 输出文件目录
    outputDir: 'online',
    lintOnSave: true,
      devServer: {
        open: true,

这些设置好了之后呢打包就没有问题了，目前亲测有效，欢迎大佬指正