前端问题:
webpack相关
1,切换路由报错Uncaught (in promise) ChunkLoadError: Loading chunk 14 failed.
场景: 使用了BrowserHistory路由后出现的错误。
原因: 打包后输出的路径问题。
解决: 修改webpack配置output中publicPath属性为 ‘/’ 解决。
2,刷新页面页面出现Cannot GET /componentPage/icon
场景: 使用了BrowserHistory路由后出现的错误。
原因: 本地开发webpack是从内存中读取资源browserRouter从实际引入中并未找到文件。也就是说咱们需要访问服务器的根目录下的index文件返回数据渲染页面,但是browser模式向服务器的非根路径下发送了请求,所以找不到页面。
解决: 启用webpack-dev-server中配置historyApiFallback。
3、打包后静态资源路径问题,导致无法读取静态资源(图片)
场景:想要实现将静态资源单独统一打包到assets目录出现问题
原因:未理解file-loader和url-loader的使用,在file-loader的options配置中添加了路径配置。
注:打包后图片引入的路径 =output.publicPath+url-loader配置的publicPath+name
解决:
1、在url-loader中进行配置,
{
test: /.(jpg|png|svg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 12000,
name: '[name]_[hash:base64:6].[ext]',
publicPath: 'assets/images/',
outputPath: 'assets/images', //打包后文件存放目录
},
},
],
},
4、build打包警告
原因:html-webpack-plugin这个包导致的警告信息
控制台执行命令
npm i html-webpack-plugin@next --D
5、webpack打包生成index.js.LICENSE.txt
原因: webpack v5随附了terser-webpack-plugin这个插件。
若要禁止生成这个文件,需要在webpack中配置:
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
extractComments: false, //禁止生成index.js.LICENSE.txt
}),
],
},
};
服务端问题
1,egg.js解决跨域问题
场景: 研究egg框架时前后端交互请求出现跨域问题。
原因: 浏览器的同源策略(协议、域名、端口)限制。
解决步骤:
1:下载egg-cors插件
npm i egg-cors --save
2:在/config/plugin.js中设置开启cors
module.exports = {
cors: {
package: 'egg-cors',
enable: true,
},
};
3:在/config/config.default.js中对其进行配置
.security : {
csrf: {
enable: false, //关闭CSRF 防范
},
}
cors: {
origin: '*',
allowMethods: 'GET,HEAD,PUT,POST,DELETE',
},