背景

我將自己的前端Vue項(xiàng)目，經(jīng)過(guò)build生成的dist文件夾copy到nginx的html文件夾中，然后寫了配置文件，運(yùn)行訪問(wèn)后發(fā)現(xiàn)頁(yè)面css樣式?jīng)]有加載到。

產(chǎn)生原因

一、vue項(xiàng)目打包時(shí)，文件引用路勁不對(duì)

打包項(xiàng)目之后可以在IDE打開(kāi)dist文件夾下的index.html看一下，看看<Hearder>標(biāo)簽中引入的css和js文件路徑是否正常。

如果正常，看下一個(gè)原因。

如果不正常，解決方法有兩種：

1、手動(dòng)修改。

直接在index.html中修改文件的引用路徑（推薦），或者移動(dòng)文件相對(duì)路徑。最終目的都是保證index.html文件能正確引用到css、js等文件。

2、修改配置文件。

如果你的文件層級(jí)如下，那么只需要在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: './',  // 就是這行代碼
})

如果文件層級(jí)不是這樣，那么自行搜索吧（狗頭）。

或者調(diào)整文件層級(jí)如上圖，再做進(jìn)一步操作。

二、nginx配置文件問(wèn)題

先說(shuō)原因：nginx返回的css文件的Content-Type不正確。

瀏覽器地址欄輸入項(xiàng)目uri訪問(wèn)項(xiàng)目，打開(kāi)F12查看網(wǎng)絡(luò)請(qǐng)求情況，查看一下返回的css文件的Content-Type，如果不是text/css，那么這就是問(wèn)題所在，如圖所示：

我的Content-Type：

這里具體是什么無(wú)所謂，只要不是text/css（僅針對(duì)css文件而言），都是錯(cuò)的

正確的Content-Type：

Contype-Type錯(cuò)誤，瀏覽器無(wú)法將文件識(shí)別為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;  # 重點(diǎn)是這里
    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 { … } 這個(gè)配置塊里面，加上include mime.types;這一項(xiàng)，含義是引入同路徑下的mime.types的文件。

然后我們查看mime.types這一文件內(nèi)容，檢查文件中是否包含：

text/css css 這一項(xiàng)，如果沒(méi)有就加上。

這里有個(gè)注意點(diǎn)：主要是路徑引用問(wèn)題。如果是include mime.types，就要確保nginx.conf文件和mime.types兩個(gè)文件在同一文件夾下沒(méi)不然就引用不到。

上述操作結(jié)束后：

重啟nginx

sudo systemctl restart nginx

或重新加載nginx配置文件

sudo systemctl reload nginx

或重啟docker容器

sudo docker restart nginx

瀏覽器問(wèn)題

如果上述操作過(guò)后，還是沒(méi)有解決問(wèn)題，建議清理以下瀏覽器緩存（親測(cè)有效）。

sh
sudo systemctl reload nginx

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

瀏覽器問(wèn)題

如果上述操作過(guò)后，還是沒(méi)有解決問(wèn)題，建議清理以下瀏覽器緩存（親測(cè)有效）。

到此這篇關(guān)于vue項(xiàng)目打包部署到nginx后css樣式失效的問(wèn)題及解決方法的文章就介紹到這了,更多相關(guān)nginx部署vue項(xiàng)目css樣式失效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論