dp-os / gez Goto Github PK

There is any way to support vue devtool and see component data(), computed(), vuex, etc for each micro app?

以及对应的这两个属性：

既然已经是 SSR 了，怎么还分客户端执行和服务端执行。

我看官方文档有内置的webpack插件，字体相关的使用file-loader加载，但是我在引入elementui启动项目时提示需要适当的加载器，我也尝试文档说的用插件形式加入，但是扔不行，有参考修改webPack信息的案例吗，我在genesis.ts增加如下代码，也不生效
export class FontPlugin1 extends Plugin {
public chainWebpack({ config }: WebpackHookParams) {
config.module
.rule('font')
.test(/.(woff2?|eot|ttf|otf)(?.*)?$/i)
.include.add(ssr.srcIncludes)
.end()
.use('file')
.loader('file-loader')
.options({
esModule: false,
name: ssr.isProd
? 'fonts/[name].[contenthash:8].[ext]'
: 'fonts/[path][name].[ext]'
});
}
}
ssr.plugin.use(FontPlugin1)

通过插件自定义webpack-chain的方式，修改css配置，会报缺少postcss config文件，建议postcss.config相关配置移动到项目跟目录

发现项目里面用的是core3，如果我项目需要用core2，请问需要怎么配置呢？

始终错误

webpack:///./node_modules/@fmfe/genesis-remote/dist/index.js?:200 Uncaught (in promise) TypeError: el.getAttributeNames is not a function
at forEach (webpack:///./node_modules/@fmfe/genesis-remote/dist/index.js?:200:24)
at Object.exports.loadScript (webpack:///./node_modules/@fmfe/genesis-remote/dist/index.js?:216:5)
at eval (webpack:///./node_modules/@fmfe/genesis-remote/dist/index.js?:406:21)
const newScript = document.createElement('script');

Could you give an example of Nginx replacing Express, since I am a backend developer

项目很赞，使用这个SSR框架，有哪些特别注意的地方吗？

在qq浏览器下会报这个错误

我有一个需求是我们公司有一个公共平台（前端vue），然后业务部门在这套代码的基础上添加模块继续开发。

这样的问题是，公共平台代码升级后，业务部门得拿到这套更新后的代码然后重新整理业务部门的代码。
这样感觉业务部门很麻烦，有什么好的办法吗？ 这个vue-genesis能优化我这个需求嘛？

公共平台和业务部门大部分都是在vue-cli脚手架的基础上，在views文件夹里面分别写各自的组件，接口返回的动态路由，分别对应这些组件。

客户端使用

给远程组件传参数

<template>
    <RemoteView :id="1000" @installed="installed" />
</template>

远程的组件使用，获取参数和发射事件

export default {
    mounted() {
        const props = RemoteView.getProps(this);
        console.log('>>>> 远程组件传过来的参数 ', props.id);
        RemoteView.emit(this, 'installed', '程序安装完成');
    }
}

服务端使用

<RemoteView :id="1000" :serverFetch="serverFetch" />

发送请求时，将props传送过去

export default {
    methods: {
        serverFetch(props) {
            axios.get('/api/render', { params: { id: props.id } });
        }
    }
};

服务端接收参数

    app.get('/api/render', (req, res, next) => {
        const url = String(req.query.renderUrl) || '/';
        const id = Number(req.query.id) || 0;
        renderer.home
            .renderJson({ url, state: { remoteViewProps: { id } } })
            .then((result) => {
                res.send(result.data);
            })
            .catch(next);
    });

服务端使用

    created() {
        const props = RemoteView.getProps(this);
        console.log('>>>> 远程组件传过来的参数 ', props.id);
    },

注意事项

• props 如果在服务端传输了无法序列化属性，将会被丢失掉，比如方法之类的
• 如果你是在SSR渲染，务必保证在created中，服务端和客户端的值一致，否则可能会出现DOM结构不匹配
• 比如props.id传递给远程组件的时候，是 number 类型，服务端接收的时候，传递给远程组件时，需要注意服务端和客户端的类型一致。
• 如果你对Node不是特别熟悉，不建议在服务端调用 RemoteView.getProps(this)，建议使用vue-router来进行传参。
• 服务端远程组件使用props，是属于高级特性，请谨慎使用。

Do you guys have any plans to upgrade for vue 3 version ?.

希望大大能给个思路或者解决方案，谢谢！！

example '@/views/Test.vue'

我这么用的

app.get('/', async function (req, res) {
        const ret = await renderer.renderHtml()
        console.log( ret )
        res.send(ret)
    });

在 send 发送的时候报错：

(node:21428) UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'SSR'
    |     property 'plugin' -> object with constructor 'PluginManage'
    |     property 'plugins' -> object with constructor 'Array'
    |     index 0 -> object with constructor 'InstallPlugin'
    --- property 'ssr' closes the circle
    at JSON.stringify (<anonymous>)

返回给前端的 json 格式是什么标准，必须配合 genesis-remote 来使用么？
需要我自己解决回环问题？自己拆解回环了前端可能还原不回来了。

1、服务端如何读取 localStorage ？延伸问题 客户端的信息如何给到服务端？

2、服务端如何获取路由？ 我想直接 请求的过来的路由跳转到我需要的页面。测试路由钩子，客户端是可以拿到from对象，服务端不行。难道只能客户端跳转了？

3、可以判断是客户端执行还是服务端执行吗？一些公共方法里可能需要这样做。

作者你好， 我的需求中是从Ajax中获取模板，在看过文档和案例源码后，这个是结合Router路由与Vue文件作的渲染.
这种场景是否有实现的方式呢?
期待您的回复。

@lzxb genesis怎么调试，多谢指点一下

设置了outputDir参数，但是启动报错了，打印看了下，应该是读取vue-ssr-client-manifest.json等文件的路径有问题；
再未设置outputDir参数时，打印出来的路径是：

2.设置了outputDir: path.resolve(__dirname, './ssr/mortise-land-page-ssr')后，打印出来的路径为：

并且启动后报错：

开始还奇怪每次都是执行2次，结果发现 /favicon.ico 被当成了页面请求，大佬，有没有什么办法处理？

感谢老哥，项目是开发得差不多了。

但是2个JS文件有1M多，对于首次加载比较慢。

就是那个 vendors.js 与 app.js

有没有办法解决下？

遇到两个跟public文件夹有关的问题：

1. dev环境运行时找不到favicon.ico，默认vue ssr好像是放在public文件夹；
2. 添加tinymce组件时，需要引用静态文件skins（css和js）等，因此要预先将skin文件添加到public文件夹；

尝试过直接将静态文件放在dist/server文件夹下面，编译时会重置。

请求帮助，或者有更好的解决方法，还请赐教，感谢

你好，

请教一个比较弱弱的问题，还望帮忙解惑，谢谢。

vue项目（运行在genesis框架下）如何添加可自定义配置文件（非模块引入方式），在build后运行npm start时，可以读取配置文件上的数据，以方便在不同环境上，快速修改配置信息，不用重新build。

common入口应用访问SSR远端子应用，希望首屏第一次加载可以直接得到渲染的带axios请求数据的完整页面。vue ssr官方使用vuex数据预取和状态处理，所以我也尝试使用vuex在entry-server.ts中操作，但是技术水平问题，未能成功，请问这个方式对吗，genesis有没有远端应用提供带请求数据初始化的案例呢

最好能给篇文章，谢谢。

nodejs 版本升级到 12.16.3 启动后 出现还没打开页面就 不停的调用 serverPrefetch 和 created 钩子函数
降回到 11.15.0 后正常 但是每刷新一次页面出现钩子函数调用了2次的现象

在IE 中 表现和 #16一致

版本 0.0.66-alpha.0

避免在构建生产环境中时没有注意到项目其实是编译失败的，导致把一个编译失败的项目发布到生产。

在serverPrefetch里执行的数据加载直接用this.xxx，在页面渲染出来会瞬间被替换掉！

看了下vue-demo是用 store 解决的，想请问这是唯一解决方法吗？

然后 store 是否一直存在服务端的吗？如果一直存在客户端，会不会很吃内存？ 对于N个客户端会不会造成共享？

trying to use tailwidncss
https://tailwindcss.com/docs/installation/#using-tailwind-with-postcss

postcss.config.js
module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

thanks in advance, I appreciate if you can provide a code sample

项目中用到了postcss-px-to-viewport这个postcss插件，需要怎么样添加进去呀？

生产环境就是这个默认的模版，但是开发环境中会是
我指定的这个模版

试了下，发现build的时候，这个plugins成功起效果了，但是在开发环境的时候（运行npm run dev），没有生效，如果我想开发环境下也要生效，需要怎么做啊？