部署nginx+vue后没有css样式

昨晚部署了一波vue,在本地使用”npm run build”打包后使用scp命令发送到了服务器的根目录，然后配置了服务器的nginx,因为我的服务器是ubuntu，所以用apt-get安装的nginx目录为/etc/nginx。我配置了nginx.conf文件，具体配置如下:

user www-data;
worker_processes auto;
pid /run/nginx.pid;

events {

        worker_connections 768;
        # multi_accept on;
}

http {

include /etc/nginx/mime.types;
default_type application/octet-stream;
server {

        listen       80; # 监听端口
        server_name  localhost; # 域名可以有多个，用空格隔开

        location / {

            root   /;     #站点根目录，即网页文件存放的根目录, 默认主页目录在nginx安装目录的html子目录。
            index  index.html index.htm;    #目录内的默认打开文件,如果没有匹配到index.html,则搜索index.htm,依次类推
            try_files $uri $uri/ /index.html;
        }
}


    }

本以为部署好了就完了，没想到访问我的ip的时候，出现了css样式无法加载的情况，我测试了一下，向后端发送请求还能发送，也能得到响应。最离谱的是在本地用serve还能正常运行。只有服务器的css离奇失踪。打开控制台，有一条黄色信息:

1	Resource interpreted as Stylesheet but transferred with MIME type text/plain

然后百度了2小时，大部分文章内容都一样，并且没有效果，我有点裂开。

今天起床再战，这次我使用了bing搜索，很快就找到了解决方法,参考自知乎关于google chrome 的 Resource interpreted as stylesheet but transferred with MIME type text/plain问题?。
把运行npm run build后在dist目录下生成的index.html文件中的

1	<!DOCTYPE html>

删掉。这下就解决了问题。不过我认为这么做有点不够优雅，待我找到了新的解决方法就会更新。