Vue CLI 環境設定與打包

2024-04-24 22:24:34

Vue CLI (Vue.js Command-Line Interface)

Vue CLI 是由 Vue.js 核心團隊所開發，用來提供開發者快速建置 Vue.js 專案並整合相關工具鍊的一套指令列 (command-line) 工具

dev server

只用於開發階段，是node run起來的伺服器讓我們可以在本地端進行開發，在執行run dev實際上是去執行vue-cli-service.js，再去拿vue.config.js中的配置

vue.config.js

Vue cli 整合http-proxy-middlewave 這個工具替我們在local 建立一個暫時性的後端服務作為代理伺

服器,讓我們在開發時可以很方便的直接呼叫遠端所提供的api

fetch('http://127.0.0.1:8081/api/login')
.then(function(response) {return response.json();
})
.then(function(myJson) {console.log(myJson);
});

對於處理跨網域要求

同源政策(Same-origin policy) 是為了保護資訊安全，避免跨網域要求竊取資料，而同源的定義是協議相同、網域相同、端口相同

CORS (cross-origin resource sharing) 跨來源資源共用

則會在 Server response 中加入 CORS header－Access-Control-Allow-Origin

讓瀏覽器知道這個 API 接受來自哪些網域的請求

vue cli build

上到正式環境需要做build的動作進行打包將各種檔案轉譯成瀏覽器看得懂的.js檔，打包後的靜態檔案會在dist資料夾在prod環境時還是需要NGINX或Apahe等HTTP server來處理

參考

Day_05 : 讓 Vite 來開啟你的Vue 之前進Vite - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

3-3 Vue CLI 環境設定與打包部署 | 重新認識 Vue.js | Kuro Hsu

Vue CLI 環境設定與打包相关推荐

電腦機房空調氣流設計與節能
近年國際間環保意識抬頭,致使世界各國紛紛積極的開始重視綠色.環保.節能等議題,於1997 年的京都議定書更被喻為人類有史以來最複雜牽扯層面最廣的協定書,這當中亦隱含了溫室氣體減量之責任應該被提升到全球 ...
(原創) 如何解決DE2_LCM_CCD上下顛倒左右相反與無法設定曝光值的問題? (SOC) (DE2)...
AbstractDE2_LCM_CCD是友晶科技為DE2和其130萬像素CMOS與彩色LCD所寫的範例,但官方的範例會造成上下顛倒左右相反與曝光值無法設定的問題,本文提出解決方式. Introduct ...
Wappalyzer — 查看網站所使用的環境、技術、主機與分析工具，一覽無遺！
文章來源:Wappalyzer - 查看網站所使用的環境.技術.主機與分析工具,一覽無遺! - TechMoon 科技月球今天要來介紹一個線上免費工具「Wappalyzer」,讓你能夠檢測網站,了解 ...
vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析从给出的提示可以看出 ...
Vue Cli 打包之后静态资源路径不对的解决方法
Vue Cli 打包之后静态资源路径不对的解决方法参考文章: (1)Vue Cli 打包之后静态资源路径不对的解决方法 (2)https://www.cnblogs.com/mengyouyouyo ...
@vue/cli与rimraf 工具包的使用，打包时 calc 报错处理及vuex使用小示例
@vue/cli 实际使用心得文章目录 @vue/cli 实际使用心得小结 components 组件开发:可以将复杂功能细分成具体的小功能模块简化开发难度,同时也会导致嵌套层数很多的情况:例如最 ...
VUE CLI 4.x 打包成APP后白屏解决办法打包APP教程
一般用VUE打包项目后,再把项目打包成APK安装包,在手机上打开应用我们会发现打开是一片白,这是什么原因呢? 路由模式为history模式. 资源的路径不对.默认情况下,Vue CLI 会假设你的应用 ...
vue cli 3项目打包到指定目录
平常我们使用vue-cli构建项目,直接执行npm run build打包到dist目录下,然后项目一般又部署在我们服务器的根目录下.这样正常的流程,但是需求是多样的,有时我们就会遇到需要把项目部署到 ...
Vue Cli 3.0打包生成app
1.vue cli 3.0创建新工程,添加依赖mint-ui 2.项目配置中,公共路径设置为./,(注意,这一步非常重要,否则打包后项目找不到项目中文件) 修改保存后,可以看到vue.confi ...

最新文章

热门文章