在 cloudflare 工作人员上运行 vue3 ssr

问题描述

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

我使用 wrangler generate test

生成了一个新项目

我使用 npm install vue@next 和 npm install @vue/server-renderer

安装了 vue

我像这样编辑了 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_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);