devServer.proxy
object [object, function]
当拥有单独的 API 后端开发服务器并且希望在同一域上发送 API 请求时,代理某些 URL 可能会很有用。
开发服务器使用功能强大的 http-proxy-middleware 软件包。 查看其 documentation 了解更多高级用法。 请注意,http-proxy-middleware 的某些功能不需要target键,例如 它的 router 功能,但是仍然需要在此处的配置中包含target,否则webpack-dev-server 不会将其传递给 http-proxy-middleware)。
使用后端在 localhost:3000 上,可以使用它来启用代理:
webpack.config.js
module.exports = {
//...
devServer: {
proxy: {
'/api': 'http://localhost:3000',
},
},
};
现在,对 /api/users 的请求会将请求代理到 http://localhost:3000/api/users。
如果不希望传递/api,则需要重写路径:
webpack.config.js
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: { '^/api': '' },
},
},
},
};
默认情况下,将不接受在 HTTPS 上运行且证书无效的后端服务器。 如果需要,可以这样修改配置:
webpack.config.js
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'https://other-server.example.com',
secure: false,
},
},
},
};
有时不想代理所有内容。 可以基于函数的返回值绕过代理。
在该功能中,可以访问请求,响应和代理选项。
返回 null 或 undefined 以继续使用代理处理请求。
返回 false 会为请求产生 404 错误。
返回提供服务的路径,而不是继续代理请求。
解析(Resolve)
这些选项能设置模块如何被解析。webpack 提供合理的默认值,但是还是可能会修改一些解析的细节。关于 resolver 具体如何工作的更多解释说明,请查看模块解析。
resolve
object
配置模块如何解析。例如,当在 ES2015 中调用 import ‘lodash’,resolve 选项能够对 webpack 查找 ‘lodash’ 的方式去做修改(查看模块)。
webpack.config.js
module.exports = {
//...
resolve: {
// configuration options
},
};
resolve.alias
object
创建 import 或 require 的别名,来确保模块引入变得更简单。例如,一些位于 src/ 文件夹下的常用模块:
webpack.config.js
const path = require('path');
module.exports = {
//...
resolve: {
alias: {
Utilities: path.resolve(__dirname, 'src/utilities/'),
Templates: path.resolve(__dirname, 'src/templates/'),
},
},
};
现在,替换“在导入时使用相对路径”这种方式,就像这样:
import Utility from ‘…/…/utilities/utility’;
你可以这样使用别名:
import Utility from ‘Utilities/utility’;
也可以在给定对象的键后的末尾添加 $,以表示精准匹配:
webpack.config.js
const path = require('path');
module.exports = {
//...
resolve: {
alias: {
xyz$: path.resolve(__dirname, 'path/to/file.js'),
},
},
};
这将产生以下结果:
import Test1 from ‘xyz’; // 精确匹配,所以 path/to/file.js 被解析和导入
import Test2 from ‘xyz/file.js’; // 非精确匹配,触发普通解析
// var webpack = require('webpack');
const path = require('path')
// Node.js path 模块提供了一些用于处理文件路径的小工具,我们可以通过以下方式引入该模块:
function resolve(dir) {
// 整合当前路径
return path.join(__dirname, dir)
}
function publicPath() {
// NODE_ENV是一个用户自定义的变量,在webpack中它的用途是判断生产环境或开发环境。
if (process.env.NODE_ENV == 'production') {
return "././";
} else {
return "/";
}
}
// vue.config.js
module.exports = {
// publicPath:"././",
publicPath: publicPath(),
// 国际化配置 使用其它语言,默认情况下中文语言包依旧是被引入的
configureWebpack: {
resolve: {
alias: {
'@': resolve('src')
}
}
},
devServer: {
host: "0.0.0.0", //指定使用一个 host。默认是 localhost,这里默认值即可
port: 8081, //指定端口
hot: true, // 开启热更新
https: false, // 是否开启https模式
proxy: { // 请求代理服务器
'/springbootjlvpC': { //带上api前缀的
target: 'http://localhost:8080/springbootjlvpC/', //代理目标地址
// changeOrigin默认是false:请求头中host仍然是浏览器发送过来的host
changeOrigin: true,
secure: false,
pathRewrite: { // 在发出请求后将/api替换为''空值,这样不影响接口请求
'^/springbootjlvpC': ''
}
}
}
}
}