一、问题来源
希望在远程发布的测试服务器上直接启用 vscode 的调试模试，来解决项目实际部属时的问题。
也就是在调试模式下，会有子域名的问题。
二、如何在调试模式下引入子域名
2.1、 运行环境：测试服务器上直接安装了 vscode 来调试前端 vue 代码。
会直接使用 npn run dev 来调试。这一版使用的 vue 版本为 2X
服务器启动后为 http://localhost:8080
子域名定为 /client , 用 nginx 来应射。
...
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;
}
2.2、如何让 webpack 发布为有子域名的运行环境
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 为去掉跨域检查。
如果这时运行，会出现 index.html 中的静态资源无法定位。
2.3、解决index.html 中的静态资源无法定位问题
output: {
path: path.resolve(__dirname, bundleOutputDir),
filename: '[name].[hash].js',
publicPath: publishName + '/'
},
需要在 output 项目再次申明 publicPath ！
2.4、如何把环境变量带到 vue 页面中去？
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,http,publishName,client,域名,源码,proxy,服务器 From： https://www.cnblogs.com/citycomputing/p/17031240.html