通过Vue-CLI添加Vuetifyjs CSS不生效_vuetify项目部署后variables文件不生效-优快云博客

文章讲述了如何修复通过Vue CLI创建的Vue项目中，使用Nginx作为服务代理时Vuetify CSS加载失败的问题，重点在于调整vuetify.js文件的导入方式和main.js配置，最终通过正确引入vuetify.min.css和vuetify/lib解决了问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过vue-cli创建的vue项目，yarn build后，用yarn serve运行没有问题，但是用nginx提供服务，vuetify的css死活无法加载！

Nginx配置

worker_processes 1;

events {
    worker_connections 10240;
}

http {
    include /usr/local/etc/nginx/mime.types;
    default_type application/octet-stream;
    server {
        listen 80;
        server_name localhost;

        location / {
            alias ~/Workspace/peds/portal/dist/;
            index index.html;
        }

        location /api {
            rewrite ^/api/(.*)$ /$1 break;
            proxy_pass http://localhost:3000;
        }
    }
}

直接修改public目录下index.html，以CDN模式引入虽然可以工作，但是找不到根本原因实在是睡不着觉。

读了一百遍vue-cli和vuetifyjs的官方文档，逐行比较代码，总算是找到症结所在。原来通过vue-cli的vue add vuetify添加的/src/plugins/vuetify.js有问题！

fix方案如下：

修改src/plugins/目录vuetify.js如下：

import Vue from 'vue';
import 'vuetify/dist/vuetify.min.css';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);
const opts = {};
export default new Vuetify(opts);

注意：

导入vuetify.min.css
要导入vuetify/lib（不是vuetify/lib/framework!）

// src/main.js
import Vue from 'vue'
import vuetify from './plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')

参考https://vuetifyjs.com/en/getting-started/installation/#webpack-install的vuetify-loader方案修改。

重新yarn build，然后nginx -s reload，打开浏览器测试，OK。