常见问题 issue 汇总

Server Side Render 时,$mount节点重新渲染问题

see issue:https://github.com/easy-team/egg-vue-webpack-boilerplate/issues/125

app.$mount('app');

改为

const root = document.getElementById('app');
const hydrate = root.childNodes.length > 0;
app.$mount(root, hydrate);

自定义静态资源路径

在 Egg + Vue/React 解决方案中, Webpack publicPath 使用的是默认 publicPath: '/public/' 配置。

如果要修复默认的 publicPath,比如要修改 /static/,需要修改两个地方:

首先版本要求

  • easywebpack: ^3.5.1

  • egg-webpack: ^3.2.5

配置修改

  • Webpack webpack.config.js 配置添加 publicPath 配置覆盖默认配置
// ${app_root}/webpack.config.js
 module.exports = {
    .....
    publicPath: '/static/' 
  };
  • Egg 配置 config.default.js 添加静态资源
// ${app_root}/config/config.local.js
 exports.static = {
    prefix: '/static/',
    dir: path.join(app.baseDir, 'public')
  };
  • 修改默认静态资源代理问题
// ${app_root}/config/config.local.js
 exports.webpack = {
    proxy: {
      match:/\/static\//
    }
 };

see https://github.com/easy-team/egg-vue-webpack-boilerplate/issues/80

禁用自动打开浏览器

// ${app_root}/config/config.local.js
exports.webpack = {
  browser: false
};

通过 egg-webpack 实现该功能,详细可以看插件具体文档。

自定义浏览器地址

// ${app_root}/config/config.local.js
exports.webpack = {
  browser: 'http://localhost:7001'
};

通过 egg-webpack 实现该功能,详细可以看插件具体文档。

document is not defined

ReferenceError: document is not defined

https://zhuanlan.zhihu.com/p/36233639

其它问题

https://yuque.com/easy-team/easywebpack/problem


Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
前端渲染模式 前端渲染模式
Egg + React 客户端浏览器渲染模式调用 egg-view-react-ssr 的 renderClient 方法实现客户端浏览器渲染renderClient 表示 Node 服务端端只渲染一个包含 HTML,header,body 的一个简单 HTML 页面骨架, 具体页面内容由 R...
2019-12-23 sky
Next 
asset 渲染模式 asset 渲染模式
背景在 前端渲染模式 章节讲到了基于 Vue 的一体化的前端渲染模式,好处是不需要借助第三方模板引擎且无需关注静态资源注入问题,但有两个小的功能限制:layout 模板数据绑定能力较弱资源注入不能自己定义,比如 async, crossorigin 等配置针对上面问题 egg-view-vue...
2019-12-23 sky