1. 程式人生 > 實用技巧 >Vue專案釋出的問題--http://localhost:8088/static/fonts/fontawesome-webfont.af7ae50.woff2

Vue專案釋出的問題--http://localhost:8088/static/fonts/fontawesome-webfont.af7ae50.woff2

問題:ngnix將8080轉成80對外訪問,找不對woff2等檔案

一\ 搭建環境

ngnix-->conf中
server {
		listen	80;
		server_name 10.9.240.9;

		location / {
			proxy_pass   http://localhost:8080;
					}
		}	  

二\解決辦法

https://github.com/vuejs/vue-cli/issues/179
style-loder 無法自己設定publicpath, 所以只能在ExtractTextPlugin後的css目錄路徑 和 webpack.base.conf做文章的,
解決的辦法有兩個,

一個在辦法是在webpack.base.conf 裡設定assetsPublicPath:'/' 根目錄,assetsSubDirectory: './在伺服器中的相對路徑/static',
config/index.js
    assetsSubDirectory: 'AbsolutePath/projectPath/static',
    assetsPublicPath: '/',
還有一個是在ExtractTextPlugin,css目錄路徑,把脫離出來的css路徑裸在專案路徑,在webpack.prod.conf中設定,
    // 不需要提到static/css 中
    //new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),  
    new ExtractTextPlugin('[name].[contenthash].css'),
config/index.js

  assetsSubDirectory: 'static',
    assetsPublicPath: './',
兩種方法都可以解決css 中img問題,
在知道專案的絕對路徑可以用一方法,
不知道專案的絕對路徑可以用二方法,(只是css檔案裸在youproject中)^-^

三\實際操作 

原因說明:這樣的話,編譯的index.html中的引用就是通過相對路徑來引用的,如果寫成10.9.111.111 就是絕對路徑來引用的

atzhang