nginx配置手机端和PC端多个vue项目

背景

一个后端服务。一个手机端，一个pc端（vue项目）。

方案

一：起两个端口
手机端vue项目写一个server，PC端在写一个server

二：起别名

1.在第一个手机端vue项目中 vue.config.js 设置publicPath

module.exports = {
    publicPath: '/front/',
    outputDir: 'dist', // 打包目录

2. 在 router/index.js中更改

    //路由配置
const router = new VueRouter({
    // mode: 'history',    //把路径的#去掉,nginx还需要配置,否则404, 设置publicPath: '/'
    mode: 'hash', //会有#号,设置publicPath: './'
    base: '/front/',

3.	进入项目  npm install       npm run build
4.  在打包后的dist文件夹下的index.html中

<meta base="/front/">

5. 将dist文件重命名或者copy一份改名 front
6. 更改项目nginx配置

  # 后台
    location /admin {
        alias   /var/www/html/electromechanical/jidianxueyuan_system/jidianxuesheng_system/admin;
        try_files $uri $uri/ /index.html?s=$uri&$args;
        index index.html index.htm index.php;

    }

    # 移动
    location /front {
        alias   /var/www/html/electromechanical/jidianxueyuan_system/jidianxuesheng_mobile/front;
        try_files $uri $uri/ /index.html?s=$uri&$args;
        index index.html index.htm index.php;
    }

    # 后端
    location /api {
        proxy_pass 
        index  index.html index.htm;
        client_max_body_size 500m; 
    }

root和alias

在于nginx如何解释location后面的uri，这会使两者分别以不同的方式将请求映射到服务器文件上。
root的处理结果是：root路径 ＋ location路径
alias的处理结果是：使用alias路径替换location路径
alias是一个目录别名的定义，root则是最上层目录的定义。
还有一个重要的区别是alias后面必须要用“/”结束，否则会找不到文件的，而root则可有可无。

# 如果一个请求的URI是/t/a.html时，web服务器将会返回服务器上的/www/root/html/t/a.html的文件。
location ^~ /t/ {
	root /www/root/html/;
}

# 如果一个请求的URI是/t/a.html时，web服务器将会返回服务器上的/www/root/html/new_t/a.html的文件。
# 注意这里是new_t，因为alias会把location后面配置的路径丢弃掉，把当前匹配到的目录指向到指定的目录。
location ^~ /t/ {
	alias /www/root/html/new_t/;
}

注意

1. 使用alias时，目录名后面一定要加"/"。
2. alias在使用正则匹配时，必须捕捉要匹配的内容并在指定的内容处使用。
3. alias只能位于location块中。（root可以不放在location中）