vue项目打包部署到nginx后css样式失效的问题及解决方法

背景

我将自己的前端Vue项目，经过build生成的dist文件夹copy到nginx的html文件夹中，然后写了配置文件，运行访问后发现页面css样式没有加载到。

产生原因

一、vue项目打包时，文件引用路劲不对

打包项目之后可以在IDE打开dist文件夹下的index.html看一下，看看<Hearder>标签中引入的css和js文件路径是否正常。

如果正常，看下一个原因。

如果不正常，解决方法有两种：

1、手动修改。

直接在index.html中修改文件的引用路径（推荐），或者移动文件相对路径。最终目的都是保证index.html文件能正确引用到css、js等文件。

2、修改配置文件。

如果你的文件层级如下，那么只需要在vue.config.js中添加publicPath: './',配置，然后重新打包一下即可。

完整vue.config.js配置文件:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 3000,
    client: {
      overlay:false,
    }
  },
  publicPath: './',  // 就是这行代码
})

如果文件层级不是这样，那么自行搜索吧（狗头）。

或者调整文件层级如上图，再做进一步操作。

二、nginx配置文件问题

先说原因：nginx返回的css文件的Content-Type不正确。

浏览器地址栏输入项目uri访问项目，打开F12查看网络请求情况，查看一下返回的css文件的Content-Type，如果不是text/css，那么这就是问题所在，如图所示：

我的Content-Type：

这里具体是什么无所谓，只要不是text/css（仅针对css文件而言），都是错的

正确的Content-Type：

Contype-Type错误，浏览器无法将文件识别为css文件，自然也就失效了。

解决办法：

修改nginx配置文件

worker_processes  auto;
error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       mime.types;  # 重点是这里
    default_type  application/octet-stream;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    sendfile        on;
    keepalive_timeout  60;
    gzip on;
    server {
        listen 80;
        server_name localhost;
        root  /usr/share/nginx/html;
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
    include /etc/nginx/conf.d/*.conf;
}

需要在http { … } 这个配置块里面，加上include mime.types;这一项，含义是引入同路径下的mime.types的文件。

然后我们查看mime.types这一文件内容，检查文件中是否包含：

text/css css 这一项，如果没有就加上。

这里有个注意点：主要是路径引用问题。如果是include mime.types，就要确保nginx.conf文件和mime.types两个文件在同一文件夹下没不然就引用不到。

上述操作结束后：

重启nginx

sudo systemctl restart nginx

或重新加载nginx配置文件

sudo systemctl reload nginx

或重启docker容器

sudo docker restart nginx

浏览器问题

如果上述操作过后，还是没有解决问题，建议清理以下浏览器缓存（亲测有效）。

sh
sudo systemctl reload nginx

或重启docker容器
```bash
sudo docker restart nginx

浏览器问题

如果上述操作过后，还是没有解决问题，建议清理以下浏览器缓存（亲测有效）。

到此这篇关于vue项目打包部署到nginx后css样式失效的问题及解决方法的文章就介绍到这了,更多相关nginx部署vue项目css样式失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！