Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

有准备支持Vue3吗 #46

Closed
KinoshitaHanson opened this issue Mar 25, 2021 · 6 comments
Closed

有准备支持Vue3吗 #46

KinoshitaHanson opened this issue Mar 25, 2021 · 6 comments

Comments

@KinoshitaHanson
Copy link

No description provided.

@lzxb
Copy link
Contributor

lzxb commented Mar 25, 2021

Vue3的官方SSR相关的还没有稳定,以及相关生态,所以一直没有弄。

@KinoshitaHanson
Copy link
Author

KinoshitaHanson commented Mar 25, 2021

刚试用了一下,反馈几个问题

  1. http服务我使用了koa,但是启动后访问页面报错,后发现renderMiddleware的签名如下
    renderMiddleware(req: IncomingMessage, res: ServerResponse, next: (err: any) => void): Promise<void>;
    需要手动包装一下,然后devMiddleware与hotMiddleware 没有看到相关签名。 经过修改后访问页面不报错了,但是显示notfound。
  2. 每次dev启动会在src目录下生成app.vue、entry-client.ts、entry-server.ts、shims-vue.d.ts 这几个文件。(我修改了目录,在src目录下建了新的文件夹,并把原有的这些文件放到了该新的文件夹中,执行dev命令后会生成新的这几个文件,内容也不一样)
    ps: app.vue内容如下
 <template>
    <div class="app">
        <h2>你好世界!</h2>
        <p v-if="show" class="text" @click="close">
            {{ installed ? '在客户端应该安装成功,点击我关闭!' : '未安装' }}
        </p>
    </div>
</template>
<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    name: 'app',
    data() {
        return {
            installed: false,
            show: true
        };
    },
    mounted() {
        this.installed = true;
    },
    methods: {
        close() {
            this.show = false;
        }
    }
});
</script>
<style lang="less" scoped>
.app {
    padding: 100px;
    text-align: center;
}
.text {
    color: #999;
    font-size: 14px;
    cursor: pointer;
}
</style>```

@lzxb
Copy link
Contributor

lzxb commented Mar 26, 2021

针对第一点,你可以看下 渲染器的知识,你不需要使用默认的中间件,直接使用底层的api调用。

@lzxb
Copy link
Contributor

lzxb commented Mar 26, 2021

app.vueentry-client.tsentry-server.tsshims-vue.d.ts这几个文件,是固定在src目录下面的。
基本目录/src
基本目录/dist/服务名称

如果你实在是想修改,可以这样去覆盖掉默认的目录

class MySSR extends SSR {
    public get srcDir() {
        // return super.srcDir;
        return path.resolve('你的目录');
    }
}

@KinoshitaHanson
Copy link
Author

感谢解答
第一点主要是webpack的dev和hot中间件是express,需要自行包装一下

@lzxb
Copy link
Contributor

lzxb commented Mar 26, 2021

嗯,是的。网上有koa保证express中间件的例子。

@lzxb lzxb closed this as completed Mar 26, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants