通过Vue-CLI添加Vuetifyjs CSS不生效

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

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);

注意：

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

• 修改src目录main.js如下

// 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。