Vue2项目按需导入指定Vuetify组件时样式未加载如何解决

问题本质 #

当前写法仅引入了组件的逻辑代码，既没有加载组件对应的样式文件，也缺少Vuetify运行必需的基础实例初始化，因此出现样式丢失问题。

修复步骤 #

• 安装开发依赖
  执行命令安装vuetify-loader，实现组件和对应样式的自动按需注入：

  npm install vuetify-loader@^1.9.2 -D
  

  如果你使用yarn，执行：

  yarn add vuetify-loader@^1.9.2 -D
  

• 修改Webpack配置
  在Webpack配置文件中引入并注册VuetifyLoaderPlugin，同时确认resolve别名配置正确：

  const { VuetifyLoaderPlugin } = require('vuetify-loader')
  
  module.exports = {
    // 保留原有其他Webpack配置
    plugins: [
      // 保留原有其他插件配置
      new VuetifyLoaderPlugin()
    ],
    resolve: {
      alias: {
        vuetify: 'vuetify/lib'
      }
    }
  }
  

• 初始化Vuetify实例并导入全局基础样式
  新建文件src/plugins/vuetify.js，写入以下配置：

  import Vue from 'vue'
  import Vuetify from 'vuetify/lib'
  // 导入Vuetify核心基础样式，这是样式生效的必要前提
  import 'vuetify/src/styles/main.sass'
  
  Vue.use(Vuetify)
  
  export default new Vuetify({
    // 可在此处自定义主题、图标库等全局配置
    icons: {
      iconfont: 'mdi' // 替换为你项目实际使用的图标库
    }
  })
  

• 在Vue根实例挂载Vuetify
  修改项目入口文件（通常为src/main.js），引入vuetify实例并挂载到根Vue实例上：

  import Vue from 'vue'
  import App from './App.vue'
  import vuetify from './plugins/vuetify'
  
  new Vue({
    vuetify,
    render: h => h(App)
  }).$mount('#app')
  

• 调整业务组件的使用方式
  完成以上配置后，不需要在业务组件中手动导入和注册Vuetify组件，直接在模板中使用<v-btn>、<v-icon>、<v-tooltip>标签即可，loader会自动完成组件和对应样式的按需加载。

  如果你坚持手动导入组件，必须额外手动引入每个组件对应的样式文件，示例：

  import { VBtn, VIcon, VTooltip } from 'vuetify/lib'
  // 手动引入每个组件的样式
  import 'vuetify/src/components/VBtn/VBtn.sass'
  import 'vuetify/src/components/VIcon/VIcon.sass'
  import 'vuetify/src/components/VTooltip/VTooltip.sass'
  
  export default {
   name: 'Project',
   components: {
    VBtn,
    VIcon,
    VTooltip,
   },
  }
  

  手动引入样式维护成本极高，项目迭代时很容易遗漏新增组件的样式导入，优先使用vuetify-loader自动导入方案

内容的提问来源于stack exchange，提问作者Anthony Daverio