本文详解Vue2+Webpack项目中的常见配置问题。涵盖ElementUI打包后图标显示异常、添加favicon图标的方法，以及基于Webpack的本地跨域代理配置。同时提供Nginx服务器部署与反向代理设置，解决生产环境接口调用问题，附带完整代码示例。
以下是本文的核心内容，后续案例供参考。
一、项目打包后，elementUi图标显示为方框问题
解决方法如下：
需要修改build目录下的utils.js文件，在ExtractTextPlugin配置中加入publicPath: ‘…/…/’。
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../', //elementui图标显示不全问题
})
} else {
return ['vue-style-loader'].concat(loaders)
}
二、如何给项目添加ico图标
具体示例如下：
实现步骤：
首先，将icon图片放置到项目根目录。
其次，在build目录下的webpack.dev.conf.js和webpack.prod.conf.js文件中搜索HtmlWebpackPlugin，并添加favicon: './favicon.ico’代码。
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: './favicon.ico'
}),三、proxy本地跨域配置
本项目采用vue2+webpack技术栈，因此跨域配置基于该环境进行。
// config文件=》index.js中proxyTable
proxyTable: {
'/api': {
target: 'http://www.baidu.com:8080', // 此处为接口的真实地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
},
此前尝试区分开发和生产环境的接口，在target中使用了process.env.ROOT_URL，结果导致本地代理失败。后来发现该文件内无法获取process；即便这样设置也是多余的，因为项目打包后本地代理并未失效。
在接口封装文件中配置相关参数，或者在config文件下的dev.env.js文件内添加BASE_API: ‘/api’，并在baseURL配置process.env.BASE_API。
var instance = axios.create({
baseURL: '/api', //接口统一域名
withCredentials: false,
timeout: 5000, //设置超时
headers: {
'Content-Type': 'application/json;charset=UTF-8;',
}
})
四、nginx配置
1. 修改nginx=>conf=>nginx.conf文件配置。
server {
listen 8088; //端口号默认80，若是端口冲突，可以更改端口号
server_name localhost; //
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
// 此处的 /api要和上面的接口封装处的baseURL一致，代理才有效果，之前被这个坑了好久
location /api {
rewrite ^/api/(.*) /$1 break;
proxy_pass http://www.baidu.com:8080; // 此处为接口的真实地址
}
2. 双击nginx文件夹下的nginx.exe启动端服务。
3. 在浏览器输入localhost:8088进行访问。
以上为个人经验总结，希望能给大家提供参考，也希望大家多多支持本站。