react-egg.js搭建项目时遇到的问题

最新推荐文章于 2022-06-22 03:14:37 发布

云幻★辰

最新推荐文章于 2022-06-22 03:14:37 发布

阅读量636

点赞数 1

分类专栏： webpack egg.js 文章标签： reactjs node.js

本文链接：https://blog.csdn.net/qq_41526942/article/details/106518923

版权

webpack 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

egg.js

2 篇文章 0 订阅

订阅专栏

前端问题：

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打包警告

DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated. BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.Mak`e sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.

原因：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',
    },