时间戳

首页 > 解决方案 > 如何在服务端渲染页面中使用一些 Vue 组件

vue.js - 如何在服务端渲染页面中使用一些 Vue 组件

问题描述

我想慢慢地将我现有的服务器端渲染网站的一部分转换为 vue 组件。在此直播中完成的方式 ( https://www.youtube.com/watch?v=qVueTeO4yMs&t=960s )。

因此，有一个包装<div id="app">围绕着所有正常的 ssr html。在某些页面上，有<custom-element>vue 组件，应该在适当的位置呈现。

这就是我的自动取款机：

<body>
    <div id="app">
        <h1>SSR content</h1>
        This should stay
        <testing-component></testing-component> <-- render the component here
    </div>
</body>

import { createApp } from 'vue'
import TestingComponent from './components/TestingComponent.vue';


const app = createApp({
    el: '#app'
});

app.component('testing-component', TestingComponent);

但这并没有渲染任何东西。

添加app.mount("#app");会覆盖我的<div id="app">.

那么，如何安装组件，而不更换我的所有东西<div id="app">？

更新

忘了说我用的是Vite。通过更新 vite 配置文件中的一些设置，我可以使它工作：

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js', // This was needed.
    },
  },
})

入口点vue：

import { createApp } from 'vue'
import TestingComponent from './components/TestingComponent.vue';


const app = createApp({
}).mount("#app");

app.component('testing-component', TestingComponent);

这将增加构建文件，所以有人告诉我。

标签： vue.jscomponentssingle-page-applicationvuejs3server-side-rendering

解决方案

推荐阅读