生产环境n.default.compile不是函数（Nuxt 2+Vuetify）问题求助

问题原因 #

Nuxt v2在生产环境默认采用Vue runtime-only构建版本，这个版本不包含模板编译器（Vue.compile属于编译器核心功能）；而开发环境使用的是带完整编译器的Vue版本，这就导致开发时能正常运行，生产环境直接找不到compile方法报错。

解决方案 #

方案1：强制Nuxt使用带编译器的Vue版本 #

在项目根目录的nuxt.config.js中添加如下配置，让生产环境的客户端代码使用包含编译器的Vue构建包：

export default {
  build: {
    extend(config, { isDev, isClient }) {
      // 仅生产环境客户端启用带编译器的Vue
      if (!isDev && isClient) {
        config.resolve.alias['vue$'] = 'vue/dist/vue.esm.js'
      }
    }
  }
}

方案2：提前编译模板（推荐） #

如果不是必须在运行时动态编译模板，建议在构建阶段就完成模板编译，避免依赖运行时编译器：

1. 安装编译依赖：

npm install vue-template-compiler --save-dev

2. 编写构建脚本或借助webpack loader，提前将模板编译为render函数，直接在组件中引入使用即可。

方案3：改用动态组件渲染模板 #

如果需要动态渲染模板内容，可以直接用Vue的动态组件component来实现，Nuxt会自动处理编译逻辑：

<template>
  <component :is="dynamicTemplateComponent" />
</template>

<script>
export default {
  data() {
    return {
      dynamicTemplateComponent: null
    }
  },
  methods: {
    updateTemplate(templateContent) {
      // 直接生成包含模板的组件选项
      this.dynamicTemplateComponent = {
        template: templateContent
      }
    }
  }
}
</script>

注意：动态渲染模板时要做好内容校验，避免XSS风险。

内容的提问来源于stack exchange，提问作者Nathan Bobato