如何在Nuxt中通过yarn generate部署vue2-datepicker到生产环境？

针对你遇到的本地正常、生产环境部署后vue2-datepicker显示异常的问题，可按以下步骤排查和修复：

1. 确认插件文件的样式引入 #

检查~/plugins/date-time.js是否正确引入了vue2-datepicker的样式文件，这是生产环境样式丢失的常见原因：

import Vue from 'vue'
import DatePicker from 'vue2-datepicker'
// 必须引入样式，否则生产环境会出现样式错乱
import 'vue2-datepicker/index.css'

Vue.component('DatePicker', DatePicker)

注意：插件模式必须保持mode: 'client'，因为vue2-datepicker是纯客户端交互组件，不能在服务端渲染。

2. 全局注入样式（备选方案） #

如果插件内引入样式无效，可直接在nuxt.config.js的css数组中全局添加样式：

export default {
  css: [
    'vue2-datepicker/index.css'
  ],
  // 其他配置...
}

静态生成（generate）时，全局css会被打包到静态资源中，确保生产环境能加载到样式。

3. 配置build转译依赖 #

如果上述步骤无效，可能是vue2-datepicker的ES模块代码未被Nuxt正确转译，可在build配置中添加转译规则：

export default {
  // 其他配置...
  build: {
    transpile: ['vue2-datepicker']
  }
}

Nuxt默认会跳过node_modules目录的转译，部分第三方包的语法需要手动指定转译才能在生产环境正常运行。

4. 检查生产依赖安装 #

确保部署时安装的是生产依赖，可修改部署脚本为：

yarn install --production && yarn generate

避免开发依赖影响生产环境的打包结果。

内容的提问来源于stack exchange，提问作者PD Chanel