vue项目服务器部属源码调试解决办法

一、问题来源

希望在远程发布的测试服务器上直接启用 vscode 的调试模试，来解决项目实际部属时的问题。

也就是在调试模式下，会有子域名的问题。

二、如何在调试模式下引入子域名

2.1、运行环境

测试服务器上直接安装了 vscode 来调试前端 vue 代码。

会直接使用 npn run dev 来调试。这一版使用的 vue 版本为 2X ，用 webpack 发布。

服务器启动后为 http://localhost:8080

子域名定为 /client , 用 nginx 来应射。下面内容来源于 nginx.conf 文件。

    ...
    location /client {
            if (-d $request_filename) {
                rewrite [^/]$ $scheme://$http_host$uri/ permanent;
            }
            proxy_pass                    http://localhost:8080;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
            proxy_set_header   Host             $http_host;
        }

这时在url 后不加斜杠"/" 不能访问页面。所以，nginx.conf 中，还需要补充如下配置

    location ~* ^/[a-z]+$ {
        rewrite ^/(.*)([^/])$ $scheme://$host/$1$2/ permanent;
    }

用于url地址自动补全最后的/（反斜杠）

2.2、如何让 webpack 发布为有子域名的运行环境

下面内容来源于 webpack.config.dev.js

const bundleOutputDir = '../wwwroot/dist'
const publishName = '/client' 
const HOST = 'localhost'
const PORT = 8080
...

devServer: {
      ...
      host: HOST,
      port: PORT,
      disableHostCheck: true,     
      publicPath: publishName + '/',
    },

这里 publishName 值为 /client ，就是子域名 http://localhost/client

这里 disableHostCheck: true 关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。

如果这时运行，会出现 index.html 中的静态资源无法定位。

2.3、解决index.html 中的静态资源无法定位问题

下面内容来源于 webpack.config.dev.js

   output: {
      path: path.resolve(__dirname, bundleOutputDir),
      filename: '[name].[hash].js',
      publicPath: publishName + '/'
    },

需要在 output 项目再次申明 publicPath ！

2.4、如何把环境变量带到 vue 页面中去？

下面内容来源于 webpack.config.dev.js

    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"development"',
          VUE_APP_API: '"' + publishName + '/"',
          VUE_APP_TITLE: '"vue demo"',
          BASE_URL: '"' + publishName + '/"',
          UPLOAD_CHUNK_SIZE: uploadChunkSize,
        }
      }),
      new webpack.HotModuleReplacementPlugin(),
      new InsertHtmlPlugin({
        container: '<body>',
        content: `<div id="mount-loading" style="width: 100vw;height: 100vh;text-align: center;"> 
                  <img alt="" src="${publishName}/static/img/loading.gif" style="margin-top: calc(50vh - 145px);" />
                </div>`
      }),
    ]