nuxt dev server 渲染的 JSX 可以工作，而 prod 版本不工作

Posted 2023-02-22

【中文标题】nuxt dev server 渲染的 JSX 可以工作，而 prod 版本不工作

【英文标题】：JSX rendered by nuxt dev server works, while the prod version doesn't work

【发布时间】：2021-01-10 13:54:30

【问题描述】：

我有一个 nuxt 应用程序，其中包含一个使用 JSX 的组件。它使用npm run dev 在本地工作，但是我在运行npm run build 后获得的dist 构建无法正确呈现。

这里'组件的代码：

<script>
import draggable from 'vuedraggable'
export default 
  data () 
    return 
      columns: [
         width: 2 ,
         width: 3 ,
         width: 4 
      ]
    
  ,
  components: 
    draggable
  ,
  render (h) 
    const buildColumn = (column, index) => 
      const result = (
        <v-col md= column.width  cols="auto">
          <v-card>
            <v-row>
              <v-col>
                <v-icon class="handle">mdi-drag</v-icon>
              </v-col>
              <v-col>
                 index 
              </v-col>
            </v-row>
          </v-card>
        </v-col>
      )
      return result
    
    return (
      <v-container>
        <draggable handle=".handle" onEnd= () => this.$emit('update-order', this.columns)  list=this.columns tag="v-row" options= animation: 500 >
           this.columns.map((column, index) => buildColumn(column, index)) 
        </draggable>
      </v-container>
    )
  

</script>

运行 npm run dev 时，会呈现以下内容：

构建后：

谁能帮我弄清楚是什么原因造成的？我包含了一个演示问题的基础回购

https://gitlab.com/qualisign/test_jsx

另一个可能的线索：

第一张图片是在检查无法加载的图标时在生产服务器上看到的非工作 html：

第二张图片是在开发服务器上检查相同元素时工作 html 的外观：

我不知道这是否有帮助，但我认为这可能是相关的。

【问题讨论】：

你是用 v-bootstrap 做这张卡的吗？

@SaZa 不，vuetify

【参考方案1】：

更新：查看 OP 共享的代码后，这似乎是 BUG #382，并且在项目存储库中也有提及。

vuetify-loaded 似乎存在问题，要解决此问题，请在配置中禁用 treeShake 选项，例如：

nuxt.config.js

...
    vuetify: 
        ...,
        treeShake: false
        
...

原答案：

看起来材质图标库未配置属性，因为未渲染图标。检查以下是否按照guide 中的说明正确配置：

检查是否安装了material-design-icons-iconfont

npm install material-design-icons-iconfont -D

检查导入的 css 文件是否位于应用的入口点 (index.js/app.js)

import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify(
  icons: 
    iconfont: 'md',
  ,
)

如果您使用库的 CDN 链接，请检查它是否正确。 <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">.

如果这仍然不起作用，请检查所有控制台和网络错误，可能是您在应用中的某处错误配置了样式/字体 url。

【讨论】：

我尝试了您的建议，但无法正常工作。在我的仓库（我使用 npx create-nuxt-app 创建的）中，Vuetify 在.nuxt/vuetify/plugins.js 中实例化，所以这是我添加材料导入的地方。另外，如果您想亲自查看，我在我的问题中添加了我的应用程序的 git 存储库。

@DavidJ。启用摇树时 vuetifyloader 似乎存在问题，默认情况下仅在生产模式下启用。如果您一直强制摇树，则在开发版本中也会出现相同的问题。