说明

项目使用vue-cli3构建的vue前端项目，分为webpc端和移动端，需要在nginx上使用同一个域名部署两个vue工程，经过半天的尝试和摸索，终于成功；

路由

路由设置要每个项目的路由前缀有区分开来，根据业务区分开来
项目一

export default new Router({
    mode: 'history',
    base: 'web',
    routes: [
      ...
    ]

项目二

export default new Router({
    mode: 'history',
    base: 'app',
    routes: [
      ...
    ]

wep与app分别代表pc端和移动端

打包事项

我这里的打包针对css，js，图片，字体等静态文件做了一些命名的处理，方便后续nginx部署配置的时候区分开来，以减少不必要麻烦

chainWebpack: config => {
//css文件
        config.resolve.alias
            .set('@', path.join(__dirname, 'src'));
        config.plugin('extract-css')
            .tap(args => [{
              filename: `css/[name].app.css?v=` + Timestamp,
              chunkFilename: `css/[name].app.css?v=` + Timestamp
            }])
//图片
        config.module
            .rule('images')
            .use('url-loader')
            .tap(options => {
              return {
                limit: 4096,
                fallback: {
                  loader: 'file-loader',
                  options: {
                    name: `img/[name].app.[ext]`
                  }
                }
              };
            })
//字体
            config.module
            .rule('fonts')
            .use('url-loader')
            .tap(options => {
              return {
                limit: 4096,
                fallback: {
                  loader: 'file-loader',
                  options: {
                    name: `fonts/[name].app.[ext]`
                  }
                }
              };
            })
    },
    css: {
        extract: true,
        sourceMap: false, // 开启 CSS source maps?
        loaderOptions: {
          css: {}, // 这里的选项会传递给 css-loader
          postcss: {} // 这里的选项会传递给 postcss-loader
        }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
        modules: false // 启用 CSS modules for all css / pre-processor files.
    },
    // webpack配置
    configureWebpack: {
//js文件
        output: {
            filename: `js/[name].app.js`,
            chunkFilename: `js/[name].app.js`
        },
        plugins: [
            // 生成可视化模块依赖图
            // 这里通过正则匹配了 moment/locale 下的名为 zh-cn 的文件。之后再打包引用moment大小减少了 70% 多
            new webpack.ContextReplacementPlugin(
                /moment[/\\]locale$/,
                /zh-cn/
            )
        ]
    }

如上代码css，js，图片等的处理，都统一在后面加了‘app’来区分未移动端的资源文件；
如css的这一部分

.tap(args => [{
     filename: `css/[name].app.css?v=` + Timestamp,
    chunkFilename: `css/[name].app.css?v=` + Timestamp
 }])

js的重命名部分

 output: {
            filename: `js/[name].app.js`,
            chunkFilename: `js/[name].app.js`
        },

图片的部分

 options: {
                    name: `fonts/[name].app.[ext]`
                  }

针对web端使用web来代替app同样的使用方法，然后打包编译
分别生成web和app两个工程

image.png

配置nginx配置文件

nginx的配置文件位于nginx目录下的conf下的nginx.conf文件，这里不做过多的解释
web用来放pc端的前端工程代码
app文件用来存放移动端工程代码
配置文件内容如下：

server {
        listen       8090;
        server_name  localhost;
        root  G:/Server/nginx-1.10.3/www;
        index index.html;
        
        location /app{
            try_files $uri $uri/ /app/index.html;
        }
        
        location ~ .*\.app.(jpg|jpeg|gif|png|ico|css|js|pdf|txt|woff|ttf|woff2|eot)$ {
            root www/app;
            proxy_temp_path www/app;
        }
        
        location /app/ {
            try_files $uri $uri/ /app/index.html;
        }
        
        location /web/ {
            try_files $uri $uri/ /web/index.html;
        }
        
        location /web {
            try_files $uri $uri/ /web/index.html;
        }
        
        location ~ .*\.web.(jpg|jpeg|gif|png|ico|css|js|pdf|txt|woff|ttf)$ {
            root www/web;
            proxy_temp_path www/web;
        }
        
        #以下服务器地址
        location /app{
            proxy_pass http://xxxx.xx.xx.xx:8088;
            add_header Content-Type "text/plain;charset=utf-8";
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST';
        }
}

配置解释：
location ~ .*.app.(jpg|jpeg|gif|png|ico|css|js|pdf|txt|woff|ttf|woff2|eot)$ {
root www/app;
proxy_temp_path www/app;
}

~ .*\.app.(jpg|jpeg|gif|png|ico|css|js|pdf|txt|woff|ttf|woff2|eot)$

这一串什么意思呢？这里稍微给大家解释下：这相当于一个正则在nginx中用来匹配文件的或者uri的，这里代表的意思是:以 .【任意字符】.app.【jpg|jpeg|gif|png|ico|css|js|pdf|txt|woff|ttf|woff2|eot其中一个（|是或的意思）】结尾的文件访问目录www/app;主要作用是用于静态文件的访问
如下同理：

location ~ .*\.web.(jpg|jpeg|gif|png|ico|css|js|pdf|txt|woff|ttf)$ {
            root www/web;
            proxy_temp_path www/web;
        }

只是把app换成了web指向也换了，其他的内容都一样，这个之前前面在打包时命名需要注意的事项，这边是相关联的；

经过实际检验可用
谢谢支持，如有错误请指出