时间戳

首页 > 解决方案 > 在 cloudflare 工作人员上运行 vue3 ssr

vue.js - 在 cloudflare 工作人员上运行 vue3 ssr

问题描述

我正在尝试在 cloudflare 工作人员上运行 vue ssr 应用程序。

我使用生成了一个新项目wrangler generate test

npm install vue@next我使用和安装了 vuenpm install @vue/server-renderer

我像这样编辑了index.js文件：

const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')

const app = createSSRApp({
  data: () => ({ msg: 'hello' }),
  template: `<div>{{ msg }}</div>`
})

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const html = await renderToString(app)
  return new Response(html, {status: 200})
}

然后我用来wrangler dev测试它，但是当我访问该页面时，我得到了这个错误：

ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined
    at Module.<anonymous> (worker.js:8:104768)
    at n (worker.js:1:110)
    at Object.<anonymous> (worker.js:8:104943)
    at n (worker.js:1:110)
    at worker.js:1:902
    at worker.js:1:912

任何帮助或指导表示赞赏

标签： vue.jscloudflare-workersvue-ssr

解决方案

我遇到了类似的问题，并且能够通过在编译期间定义一个全局常量（ VUE_PROD_DEVTOOLS = false）来修复它。

这是我的 webpack prod 配置的样子：

const webpack = require('webpack');
const { merge } = require("webpack-merge");
const webpackCommon = require("./webpack.common");

const prodConfig = {
    mode: 'production',
    plugins: [
        new webpack.DefinePlugin({
            __VUE_PROD_DEVTOOLS__: JSON.stringify(false)
          }),
    ]
};

module.exports = merge(webpackCommon, prodConfig);

推荐阅读