dp-os / gez Goto Github PK
View Code? Open in Web Editor NEW🔥Module as a service, a simple and powerful vue2 SSR framework🔥
License: MIT License
🔥Module as a service, a simple and powerful vue2 SSR framework🔥
License: MIT License
1、服务端如何读取 localStorage ?延伸问题 客户端的信息如何给到服务端?
2、服务端如何获取路由? 我想直接 请求的过来的路由跳转到我需要的页面。测试路由钩子,客户端是可以拿到from对象,服务端不行。难道只能客户端跳转了?
3、可以判断是客户端执行还是服务端执行吗?一些公共方法里可能需要这样做。
给远程组件传参数
<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);
},
created
中,服务端和客户端的值一致,否则可能会出现DOM结构不匹配props.id
传递给远程组件的时候,是 number 类型,服务端接收的时候,传递给远程组件时,需要注意服务端和客户端的类型一致。RemoteView.getProps(this)
,建议使用vue-router来进行传参。在serverPrefetch里执行的数据加载直接用this.xxx,在页面渲染出来会瞬间被替换掉!
看了下vue-demo是用 store 解决的,想请问这是唯一解决方法吗?
然后 store 是否一直存在服务端的吗?如果一直存在客户端,会不会很吃内存? 对于N个客户端会不会造成共享?
作者你好, 我的需求中是从Ajax中获取模板,在看过文档和案例源码后,这个是结合Router路由与Vue文件作的渲染.
这种场景是否有实现的方式呢?
期待您的回复。
我有一个需求是我们公司有一个公共平台(前端vue),然后业务部门在这套代码的基础上添加模块继续开发。
这样的问题是,公共平台代码升级后,业务部门得拿到这套更新后的代码然后重新整理业务部门的代码。
这样感觉业务部门很麻烦,有什么好的办法吗? 这个vue-genesis能优化我这个需求嘛?
公共平台和业务部门大部分都是在vue-cli脚手架的基础上,在views文件夹里面分别写各自的组件,接口返回的动态路由,分别对应这些组件。
"Mozilla/5.0 (Linux; Android 6.0; vivo Y67L Build/MRA58K; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/51.0.2704.81 Mobile Safari/537.36 followmeAndroid"
最好能给篇文章,谢谢。
项目很赞,使用这个SSR框架,有哪些特别注意的地方吗?
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
遇到两个跟public文件夹有关的问题:
尝试过直接将静态文件放在dist/server文件夹下面,编译时会重置。
请求帮助,或者有更好的解决方法,还请赐教,感谢
试了下,发现build的时候,这个plugins成功起效果了,但是在开发环境的时候(运行npm run dev),没有生效,如果我想开发环境下也要生效,需要怎么做啊?
通过插件自定义webpack-chain的方式,修改css配置,会报缺少postcss config文件,建议postcss.config相关配置移动到项目跟目录
你好,
请教一个比较弱弱的问题,还望帮忙解惑,谢谢。
vue项目(运行在genesis框架下)如何添加可自定义配置文件(非模块引入方式),在build后运行npm start时,可以读取配置文件上的数据,以方便在不同环境上,快速修改配置信息,不用重新build。
Do you guys have any plans to upgrade for vue 3 version ?.
Could you give an example of Nginx replacing Express, since I am a backend developer
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 来使用么?
需要我自己解决回环问题?自己拆解回环了前端可能还原不回来了。
@lzxb genesis怎么调试,多谢指点一下
我看官方文档有内置的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)
希望大大能给个思路或者解决方案,谢谢!!
避免在构建生产环境中时没有注意到项目其实是编译失败的,导致把一个编译失败的项目发布到生产。
在IE 中 表现和 #16一致
版本 0.0.66-alpha.0
发现项目里面用的是core3,如果我项目需要用core2,请问需要怎么配置呢?
项目中用到了postcss-px-to-viewport这个postcss插件,需要怎么样添加进去呀?
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');
common入口应用访问SSR远端子应用,希望首屏第一次加载可以直接得到渲染的带axios请求数据的完整页面。vue ssr官方使用vuex数据预取和状态处理,所以我也尝试使用vuex在entry-server.ts中操作,但是技术水平问题,未能成功,请问这个方式对吗,genesis有没有远端应用提供带请求数据初始化的案例呢
感谢老哥,项目是开发得差不多了。
但是2个JS文件有1M多,对于首次加载比较慢。
就是那个 vendors.js 与 app.js
有没有办法解决下?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.