vue項(xiàng)目打包發(fā)布后接口報(bào)405錯(cuò)誤的解決
vue項(xiàng)目打包發(fā)布后接口報(bào)405
vue項(xiàng)目前端做了代理打包后后臺(tái)不識(shí)別報(bào)405 not allowed
vue.config.js文件配置
? devServer: { ? ? // host: "0.0.0.0", //項(xiàng)目運(yùn)行時(shí)的本地地址 ? ? // port: 8880, // 端口號(hào) ? ? //proxy:{'/api':{}},代理器中設(shè)置/api,項(xiàng)目中請(qǐng)求路徑為/api的替換為target ? ? proxy: { ? ? ? '/api': { ? ? ? ? // target: "http://192.168.0.249:19029",//代理地址,這里設(shè)置的地址會(huì)代替axios中設(shè)置的baseURL ? ? ? ? target: process.env.VUE_APP_BASEURL_API,//代理地址,這里設(shè)置的地址會(huì)代替axios中設(shè)置的baseURL ? ? ? ? changeOrigin: true,// 如果接口跨域,需要進(jìn)行這個(gè)參數(shù)配置 ? ? ? ? //ws: true, // proxy websockets ? ? ? ? //pathRewrite方法重寫url ? ? ? ? pathRewrite: { ? ? ? ? ? '^/api': "/" ? ? ? ? ? //pathRewrite: {'^/api': '/'} 重寫之后url為 http://192.168.1.16:8085/xxxx ? ? ? ? ? //pathRewrite: {'^/api': '/api'} 重寫之后url為 http://192.168.1.16:8085/api/xxxx ? ? ? ? }, ? ? }, ? ? https: false, // https:{type:Boolean} ? ? disableHostCheck: true, ? ? open: true, //配置自動(dòng)啟動(dòng)瀏覽器 ? },
default.conf文件配置
server { ? ? listen ? ? ? 9000; ? ? server_name ?localhost; ? ? #charset koi8-r; ? ? #access_log ?/var/log/nginx/log/host.access.log ?main; ? ? location / { ? ? ? ? root ? /usr/share/nginx/html; ? ? ? ? index ?index.html index.htm; ? ? ? ? try_files ?$uri $uri/ ?@router; ? ? } ? ? location /api { ? ? ? ?rewrite ^/api/$ ?permanent; ? ? ? ?proxy_pass http://192.168.0.253:30001/warehouse/; ? ? ? ?proxy_redirect default; ? ? ? ?proxy_set_header Host $host; ? ? ? ?proxy_set_header X-Real-IP $remote_addr; ? ? ? ?proxy_set_header REMOTE-HOST $remote_addr; ? ? ? ?proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; ? ? } ? ? #error_page ?404 ? ? ? ? ? ? ?/404.html; ? ? # redirect server error pages to the static page /50x.html ? ? # ? ? error_page ? 500 502 503 504 ?/50x.html; ? ? location = /50x.html { ? ? ? ? root ? html; ? ? } ? ? # proxy the PHP scripts to Apache listening on 127.0.0.1:80 ? ? # ? ?? ? ? #location ~ \.php$ { ? ? # ? ?proxy_pass ? http://127.0.0.1; ? ? #} ?# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 ? ? # ? ? #location ~ \.php$ { ? ? # ? ?root ? ? ? ? ? html; ? ? # ? ?fastcgi_pass ? 127.0.0.1:9000; ? ? # ? ?fastcgi_index ?index.php; ? ? # ? ?fastcgi_param ?SCRIPT_FILENAME ?/scripts$fastcgi_script_name; ? ? # ? ?include ? ? ? ?fastcgi_params; ? ? #} ? ? location @router { ? ? ? ? rewrite ^.*$ /index.html last; ? ? } ? ? # deny access to .htaccess files, if Apache's document root ? ? # concurs with nginx's one ? ? # ? ? #location ~ /\.ht { ? ? # ? ?deny ?all; ? ? #} }
vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤問(wèn)題
錯(cuò)誤信息
這是新建一個(gè)項(xiàng)目還原問(wèn)題,node簡(jiǎn)單寫了個(gè)數(shù)據(jù)返回
關(guān)鍵代碼
const express = require('express') const app = express(); // 解決跨域問(wèn)題 app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS'); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header('Access-Control-Allow-Headers', 'Content-Type'); next(); }) // 調(diào)用接口直接返回一個(gè)數(shù)組 app.get('/getData', (req, res) => { res.send([ { id: 1, name: 'GAI' }, { id: 2, name: 'keyNg' }, { id: 3, name: '閃火' } ]) })
// api/index.js import axios from 'axios' export function getData() { return axios({ url: 'api/getData', method: 'get' }) }
// home.vue mounted() { getData().then(res => { console.log(res); }) },
打包前
打包后
解決方式
設(shè)置環(huán)境變量
引用一句官網(wǎng)原話
請(qǐng)注意,只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 開頭的變量將通過(guò) webpack.DefinePlugin 靜態(tài)地嵌入到客戶端側(cè)的代碼中。這是為了避免意外公開機(jī)器上可能具有相同名稱的私鑰。
1.根目錄新增.env.development文件(會(huì)在開發(fā)環(huán)境被載入)
// .env.development VUE_APP_TITLE = '溫情dev' VUE_APP_ENV = 'dev' VUE_APP_BASE_URL = 'http://localhost:3000'
2.根目錄新增.env.production文件(會(huì)在生產(chǎn)環(huán)境被載入)
// .env.production VUE_APP_TITLE = '溫情pro' VUE_APP_ENV = 'pro' VUE_APP_BASE_URL = 'http://localhost:3000'
3.改一下 axios 請(qǐng)求方法
// api/index // 這里只是簡(jiǎn)單解決一下問(wèn)題 // 重點(diǎn)就是把開發(fā)環(huán)境和生產(chǎn)環(huán)境請(qǐng)求地址區(qū)分開來(lái)就可以了, 根據(jù)實(shí)際情況自行改動(dòng) import axios from 'axios' let baseURL = ''; // process.env.VUE_APP_ENV拿到我們?cè)谇懊嬖O(shè)置的模式, // 如果現(xiàn)在是開發(fā)環(huán)境會(huì)使用`.env.development`里面設(shè)置的環(huán)境變量等于`dev` // 如果現(xiàn)在是生產(chǎn)環(huán)境會(huì)使用`.env.production`里面設(shè)置的環(huán)境變量等于`pro` if(process.env.VUE_APP_ENV === 'dev') { ? ? baseURL = '/api'; } else { ? ? baseURL = process.env.VUE_APP_BASE_URL } export function getData() { ? ? return axios({ ? ? ? ? url: `${baseURL}/getData`, ? ? ? ? method: 'get' ? ? }) }
小提示: .env.development和.env.production文件修改之后記得重新跑一下項(xiàng)目
總結(jié):區(qū)分開發(fā)模式
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue3+vite assets動(dòng)態(tài)引入圖片的三種方法及解決打包后圖片路徑錯(cuò)誤不顯示的問(wèn)題
- vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問(wèn)題及解決
- vue項(xiàng)目打包后請(qǐng)求地址錯(cuò)誤/打包后跨域操作
- vue webpack打包后圖片路徑錯(cuò)誤的完美解決方法
- Vue項(xiàng)目webpack打包部署到Tomcat刷新報(bào)404錯(cuò)誤問(wèn)題的解決方案
- 關(guān)于Vue背景圖打包之后訪問(wèn)路徑錯(cuò)誤問(wèn)題的解決
- vue+tsc+noEmit導(dǎo)致打包報(bào)TS類型錯(cuò)誤問(wèn)題及解決方法
相關(guān)文章
elementUI如何動(dòng)態(tài)給el-tree添加子節(jié)點(diǎn)數(shù)據(jù)children詳解
element-ui 目前基本成為前端pc網(wǎng)頁(yè)端標(biāo)準(zhǔn)ui框架,下面這篇文章主要給大家介紹了關(guān)于elementUI如何動(dòng)態(tài)給el-tree添加子節(jié)點(diǎn)數(shù)據(jù)children的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11vue3+vite自定義封裝vue組件發(fā)布到npm包的全過(guò)程
當(dāng)市面上主流的組件庫(kù)不能滿足我們業(yè)務(wù)需求的時(shí)候,那么我們就有必要開發(fā)一套屬于自己團(tuán)隊(duì)的組件庫(kù),下面這篇文章主要給大家介紹了關(guān)于vue3+vite自定義封裝vue組件發(fā)布到npm包的相關(guān)資料,需要的朋友可以參考下2022-09-09vue中動(dòng)態(tài)修改img標(biāo)簽中src的方法實(shí)踐
本文主要介紹了vue中動(dòng)態(tài)修改img標(biāo)簽中src的方法實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07vue.js模仿京東省市區(qū)三級(jí)聯(lián)動(dòng)的選擇組件實(shí)例代碼
選擇省市區(qū)是我們大家在填寫地址的時(shí)候經(jīng)常會(huì)遇到的一個(gè)功能,下面這篇文章主要給大家介紹了關(guān)于利用vue.js模仿實(shí)現(xiàn)京東省市區(qū)三級(jí)聯(lián)動(dòng)選擇組件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-11-11electron-vue?運(yùn)行報(bào)錯(cuò)?Object.fromEntries?is?not?a?function
Object.fromEntries()?是?ECMAScript?2019?新增的一個(gè)靜態(tài)方法,用于將鍵值對(duì)列表(如數(shù)組)轉(zhuǎn)換為對(duì)象,如果在當(dāng)前環(huán)境中不支持該方法,可以使用?polyfill?來(lái)提供類似功能,接下來(lái)通過(guò)本文介紹electron-vue?運(yùn)行報(bào)錯(cuò)?Object.fromEntries?is?not?a?function的解決方案2023-05-05在vue中通過(guò)render函數(shù)給子組件設(shè)置ref操作
這篇文章主要介紹了在vue中通過(guò)render函數(shù)給子組件設(shè)置ref操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11