vue2 webpack proxy與nginx配置方式
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、項目打包后，elementUi圖標(biāo)顯示為方框問題
解決：
修改build文件=》utils.js中的ExtractTextPlugin,加入 publicPath: ‘…/…/’,
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../', //elementui圖標(biāo)顯示不全問題
})
} else {
return ['vue-style-loader'].concat(loaders)
}
二、如何給項目添加ico圖標(biāo)
例如：
實現(xiàn)步驟：
1. 把icon圖片放在項目的根目錄下
2. build文件下的webpack.dev.conf.js 和 webpack.prod.conf.js 文件內(nèi)搜索HtmlWebpackPlugin；并加入favicon: './favicon.ico’代碼
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: './favicon.ico'
}),三、proxy本地跨域配置
本人項目使用的是vue2+webpack技術(shù)棧，所以跨域是基于此技術(shù)棧之上配置。
// config文件=》index.js中proxyTable
proxyTable: {
'/api': {
target: 'http://www.baidu.com:8080', // 此處為接口的真實地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
},
之前想?yún)^(qū)分開發(fā)和生產(chǎn)環(huán)境的接口，所以在target使用了process.env.ROOT_URL,結(jié)果發(fā)現(xiàn)本地代理失敗了，后面才知道在此文件內(nèi)獲取不到process；即使這樣設(shè)置也是多余的，因為在項目打包后本地代理是沒有失效的
接口封裝文件相關(guān)配置,或者也可以在config文件=》的dev.env.js文件內(nèi)添加BASE_API: ‘/api’,這里的baseURL配置process.env.BASE_API
var instance = axios.create({
baseURL: '/api', //接口統(tǒng)一域名
withCredentials: false,
timeout: 5000, //設(shè)置超時
headers: {
'Content-Type': 'application/json;charset=UTF-8;',
}
})
四、nginx配置
1. nginx=>conf=>nginx.conf文件配置
server {
listen 8088; //端口號默認(rèn)80，若是端口沖突，可以更改端口號
server_name localhost; //
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
// 此處的 /api要和上面的接口封裝處的baseURL一致，代理才有效果，之前被這個坑了好久
location /api {
rewrite ^/api/(.*) /$1 break;
proxy_pass http://www.baidu.com:8080; // 此處為接口的真實地址
}
2. 雙擊nginx文件夾下nginx.exe啟動端服務(wù)
3. 瀏覽器輸入 localhost:8088訪問
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了記一次Vue中$route序列號報錯，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
本篇文章主要介紹了詳解在Vue中通過自定義指令獲取dom元素 ，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
Vue3中toRef、toRefs都是與響應(yīng)式數(shù)據(jù)相關(guān)的，本文主要來給大家講解一下Vue3中的toRef和toRefs的使用，感興趣的朋友跟隨小編一起看看吧2023-01-01
Vue3?Watch踩坑實戰(zhàn)之watch監(jiān)聽無效
Vue.js中的watch選項用于監(jiān)聽Vue實例上某個特定的數(shù)據(jù)變化,下面這篇文章主要給大家介紹了關(guān)于Vue3?Watch踩坑實戰(zhàn)之watch監(jiān)聽無效的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue實現(xiàn)PC端錄音功能的實例代碼，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
Vue+Koa2+mongoose寫一個像素繪板的實現(xiàn)方法
這篇文章主要介紹了Vue+Koa2+mongoose寫一個像素繪板的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue reactive函數(shù)實現(xiàn)流程詳解
一個基本類型的數(shù)據(jù),想要變成響應(yīng)式數(shù)據(jù),那么需要通過ref函數(shù)包裹,而如果是一個對象的話,那么需要使用reactive函數(shù),這篇文章主要介紹了Vue reactive函數(shù)2023-01-01
這篇文章主要介紹了在vue 中使用 less 的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。這篇文章主要介紹了vue組件（全局，局部，動態(tài)加載組件）,需要的朋友可以參考下2018-09-09
vue中Axios添加攔截器刷新token的實現(xiàn)方法
Axios是一款網(wǎng)絡(luò)前端請求框架，本文主要介紹了vue中Axios添加攔截器刷新token的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02