leotaozeng / vue-airbnb-ssr

Airbnb-Clone (server-side rendering) using Element Plus, Vue 3 along with Vite.

Vue 3 + Typescript + Vite

This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

• VSCode + Volar

Type Support For .vue Imports in TS

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can enable Volar's Take Over mode by following these steps:

1. Run Extensions: Show Built-in Extensions from VSCode's command palette, look for TypeScript and JavaScript Language Features, then right click and select Disable (Workspace). By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

You can learn more about Take Over mode here.

vue-airbnb-ssr's Issues

npm run dev运行时候报错，请问这种情况该怎么办，谷歌搜索也没解决

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

客户端和服务端编译之后运行prod:ssr报错

客户端和服务端编译之后运行prod:ssr报错

报错内容是需要解析不了 ES module 格式

如果作者编译没有问题能不能告诉我 node版本和npm版本

Not working for prod

hey, really cool project, it really helped me. However, I have a problem in prod. if I build the project with build:ssr and start it on a server with prod:ssr, then the axios requests no longer work with the proxy.

The requests are displayed in the network tab but the response is simply the index.html:

Could it be because I don't use a router? I have removed everything that has to do with routers. However, everything works locally with dev:ssr.

My package.json scripts:

"dev:ssr": "cross-env NODE_ENV=development npx node-dev server",
"prod:ssr": "cross-env NODE_ENV=production npx node-dev server",
"build:ssr": "npm run build:client && npm run build:server",
"build:client": "vite build --ssrManifest --outDir dist/client",
"build:server": "vite build --ssr src/entry-server.js --outDir dist/server",

My vite.config.ts:

import {fileURLToPath, URL} from 'url'

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

export default defineConfig(({ command, mode }) => {
    const env = loadEnv(mode, process.cwd())

    return {
        plugins: [vue()],
        resolve: {
            alias: {
                '@': fileURLToPath(new URL('./src', import.meta.url))
            }
        },
        server: {
            proxy: {
                "/api": {
                    target: `https://${env.VITE_DASHBOARD_SUB}.${env.VITE_DOMAIN}`,
                    changeOrigin: true
                },
                "/tebex": {
                    target: "https://plugin.tebex.io",
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/tebex/, ""),
                    headers: {
                        'X-Tebex-Secret': env.VITE_TEBEX_SECRET
                    }
                }
            }
        },
        css: {
            preprocessorOptions: {
                scss: {
                    quietDeps: true,
                    additionalData: `
                    @use 'aos/dist/aos.css';
                    @use 'sweetalert2/src/sweetalert2.scss';
                    @use '@/assets/scss/sweetalert.scss';
                    @use '@/assets/scss/fonts.scss';
                    @use '@/assets/scss/slides/slides.scss';
                `
                }
            }
        }
    }
})