Vue 项目 Nginx 相关配置

设置路由为 /admin 的上下文（http://xxxx.xxx/admin/xxx）

Vue 中的配置：

下面是config.js文件中的主要配置项，build后会生成一个 admin 的文件夹

vue-cli 2.xx

// config.js
const path = require('path');
module.exports = {
  dev: {
    ...
  },
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../admin/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../admin'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/admin/',
    ...
  }
}

// reouter.js
export default new VueRouter({
  base: '/admin/', // 两边斜杠要加
  mode: 'history',
  routes: constantRouterMap,
  scrollBehavior: () => ({ y: 0 })
});

vue-cli 3.xx

Nginx 中的配置：

Nginx 中的index.conf配置如下

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       7171;
        server_name  localhost;

        location / {
            root   /Users/mengxiong/Documents/localNG;
            index  index.html index.htm;
        }

        location /admin/ {
            # root /Users/mengxiong/Documents/localNG/;
            alias /Users/mengxiong/Documents/localNG/admin/;
            index  index.html index.htm;
            try_files $uri $uri /admin/index.html;
        }

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {
            root   html;
        }
    }
    include servers/*;
}

nginx目录