背景

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

產(chǎn)生原因

一、vue項目打包時，文件引用路勁不對

打包項目之后可以在IDE打開dist文件夾下的index.html看一下，看看<Hearder>標(biāo)簽中引入的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: './',  // 就是這行代碼
})

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

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

二、nginx配置文件問題

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

瀏覽器地址欄輸入項目uri訪問項目，打開F12查看網(wǎng)絡(luò)請求情況，查看一下返回的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這一文件內(nèi)容，檢查文件中是否包含：

text/css css 這一項，如果沒有就加上。

這里有個注意點：主要是路徑引用問題。如果是include mime.types，就要確保nginx.conf文件和mime.types兩個文件在同一文件夾下沒不然就引用不到。

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

重啟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

瀏覽器問題

如果上述操作過后，還是沒有解決問題，建議清理以下瀏覽器緩存（親測有效）。

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

最新評論