Giter VIP home page Giter VIP logo

Comments (6)

lzxb avatar lzxb commented on July 30, 2024

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

from gez.

KinoshitaHanson avatar KinoshitaHanson commented on July 30, 2024

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

  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>```

from gez.

lzxb avatar lzxb commented on July 30, 2024

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

from gez.

lzxb avatar lzxb commented on July 30, 2024

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('你的目录');
    }
}

from gez.

KinoshitaHanson avatar KinoshitaHanson commented on July 30, 2024

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

from gez.

lzxb avatar lzxb commented on July 30, 2024

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

from gez.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.