溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
寫在前面
vue-cli 3.x 的beta版本已經發布了一段時間，很早就像體驗一番一直找不到時間。這些日子剛好有空就想著依照網上的一些例子練下手，剛一上手就踩到坑了。
3.x 版本對整個項目的構建都有很大的改動，項目的默認配置整個都轉移到CLI service里去了，從而所有的配置文件在初始化的項目中并沒有生成。初次生成項目的時候可謂是完全懵的，無論是baidu還是google，對于3.x的介紹幾乎就沒有，僅有的一些也只是項目的一些生成流程，那怎么辦，只能靠自己瞎整了。
既然沒有現成的（作為一個伸手黨我還是很自覺的承認了），那就只能去扒官方文檔了，慢慢啃。這可就苦了我這個英語戰斗力只有5的渣了，憑借著百度翻譯和谷歌翻譯，然后夾雜著自己的一些猜想，好歹是把基本的給整明白了一點點。
由于文筆實在太爛了，多余的廢話就不說了，直接上干貨。
跨域代理配置
由于3.x的默認配置都轉移到了CLI service里，所以生成的項目中并沒有配置項，我們如果需要自定義一些項目配置，則需要自己在項目的根目錄(root)創建一個vue.config.js。vue.config.js里的配置項所有都是可選的，這就避免了我們去看一大堆不必要的默認配置，只需要配置自己需要的部分就行了。【官方文檔】
由于baseUrl也是關聯的部署目錄，我們需求的僅僅是開發環境的變量，所以盡可能的我們不動baseUrl這個變量以免部署的時候出現問題。所以這里配置稍作修改。
需求上是我們只需要在開發環境配置跨域代理，所以我們可以在開發環境的配置上加上能夠代理上的環境變量即可。官方提供了環境變量的配置方案。
在項目的根目錄，我們創建一個.env.development文件來做開發環境的變量設置。
我們在.env.development文件下設置變量VUE_APP_BASE_API=/api即可將devServer的proxy重寫的url賦值給VUE_APP_BASE_API，我們僅需在axios的封裝方案上使用VUE_APP_BASE_API這個變量，就可以對應上devServer設置的變量。
// vue.config.js
module.exports = {
// 修改的配置
// 將baseUrl: '/api',改為baseUrl: '/',
baseUrl: '/',
devServer: {
proxy: {
'/api': {
target: 'http://www.example.org',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
// .env.development
VUE_APP_BASE_API=/api
這里依然是采用的http-proxy-middleware來做的代理配置，一些自定義配置可以移步到官網去進行參考。
后記
第一次寫文檔，之前都是伸手養成了懶得習慣，現在因沒有可伸手的，就自己擼了，同時以此便利萌新以及也在踩坑的小伙伴。希望能幫到大家。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
