一、问题来源
希望在远程发布的测试服务器上直接启用 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>` }), ]
通过 DefinePlugin() 中的 'process.env' 中传入需要传递的 key:value 对。
这样在vue 文件中就可以使用了。
不过，这时查看 chrome 的开发者工具，会发现不时 sockjs.js 有报错：
这是 sockjs-node 库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。
开发时，如果变更网络环境（如切换wifi导致开发服务器的IP地址更换），服务器不知道如何确定访问源，就有可能造成上述情况
2.5、vue-cli3 一直运行 /sockjs-node/info?t=解决办法
找到/node_modules/sockjs-client/dist/sockjs.js
上面报错时为 1609 行，把这行的 self.xhr.send,注释掉：
存盘后，vscode 会自动重编译项目。
三、参考文章
nginx location配置详细解释 nginx 配置中 url地址自动补全最后的/（反斜杠）
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。