Vue CLI 之 Mode 與 .env
實務上一定會遇到在不同 server ( development、lab、staging 與 production) ，且各有各的 環境變數，該如何設定這些環境變數並且自動切換呢 ?
タグ : Vue
在 Vue 實現 Compilation Variable
實務上如每個廠區的 route 與 page 都不相同，而每個廠區的 變數 都在編譯時期就決定了，這些變數就是 compilation variable，可將這些變數定義在不同的 .env 中，當使用 vue-cli-service 編譯時，可加上 --mode 參數指定使用不同的 .env。
Reading Excel on Vue
Although we can’t read Excel files on Vue directly, we can use the xlsx package to finish the task.
Making Reactive Object with reactive() and ref()
If an Object is modified, we want the HTML to be updated accordingly. We may use reactive() or ref() to create the Object.
Using reactive() to Create the Reactive Object
Not only using ref() to create the Reactive Reference, we can also use reactive() to create the Reactive Object.
Preparing Body Object for fetch()
When using fetch() for REST POST, we can easily prepare Body Object on Vue.
Vue 3.2 Overview
Vue 3.2 is the most essential upgrade since Vue 3, <script setup> is not experimental anymore.
Integrating Petite-vue with Hugo
Petite-vue is great for JAMstack, but we have to integrate Petite-vue with Hugo manually.
Building Accordion using Vue and TailwindCSS
Accordion is a common effect by toggling the element. We can implement it just by Vue and TailwindCSS without any package.
Using CSS Transition for v-if
When using v-if to make elements shown or hidden, if we want the fade-in and fade-out effect, Vue provides <transition> component and corresponding CSS class. We can also use TailwindCSS with v-if.
Using ES Module to Extract Duplicate Code
Not only can we use createApp by ES module, but we also can extract duplicate code to ES modules.
Using Class Binding with TailwindCSS
TailwindCSS is actually a set of predefined CSS classes. If we want to change utility according to the state, we have to use Vue’s Class Binding.
How to Create CSV File and Download it Automatically ?
We can create a CSV file and download it automatically without any packages.
Using ref to Create Reactive Reference
Reactivity is an essential part of Vue. We use ref to create a Reactive Reference of value.
Comparison between ref, reactive and $ref
Reactivity in Vue 2 is simple, it only returns an object in data(). But we have ref, reactive and $ref in Vue 3. What are the differences between them ?
Using readonly to Implement Immutable Object
Although we use const as the modifier for an Object, we can still modify its property. readonly comes to the rescue of semantic.
How to read Environment Variable in Vue?
Some variable is different in development mode and production mode, like the URL of the API server. We can define them in the .env file and read the environment variable in Vue.
Running Vue on AWS EC2 with Ubuntu
If we can run Vue by Docker on the local machine, we can run Vue by Docker on AWS EC2.
Using Polling for Continuous API Call
If data is changing continuously, we will use polling for continuous API call to get data in practical.
How to use window.open with Vue Route?
We often use Vue Route for all pages in Vue, but window.open only support native url. We can use resolve to transform from Vue Route to native url.
How to Open Small Window at Top Right Corner?
If we want to open a small window at top right corner, we can use window.open to implement it.
使用 Nginx + Express 實現 Microservice
若要使用 Microservice 架構，則會各自將 Vue 與 Express 包成 Docker Image，然後使用 Docker Compose 一次啟動 Vue 與 Express，此時 Express 會包在 Docker 內部網路，Vue 需使用 Nginx 的 Reverse Proxy 才能連上 Express。
使用 Express 實現 Microservice
若要使用 Microservice 架構，則會各自將 Vue 與 Express 包成 Docker Image，然後使用 Docker Compose 一次啟動 Vue 與 Express，此時 Express 會包在 Docker 內部網路，Vue 所需的 HTTP Service 與 Reverse Proxy 也使用 Express 提供。
使用 Docker 將 Express + Vue 打包成 Image
Vue CLI 提供 yarn build 將 HTML / CSS / JS 編譯到 dist 目錄下，我們可再利用 Node + Express 當 Web Server，自行擴充 NPM Script，最後只要下 yarn docker 就可一鍵建立 Docker Image。
使用 Docker Compose 測試含 Sub-Path 的 Vue
實務上 Vue 不見得都放在 Domain 的 Root-path，而是放在 Sub-path，在 Vue CLI、Nginx 與 docker-compose.yml 都必須特別設定。
使用 Docker Compose 測試 Build 過的 Vue
yarn serve 只能測試 src 目錄下的 Vue，可使用 docker compose 配合 Nginx 快速測試 dist 目錄下的 Vue。
使用 Docker 將 Nginx + Sub-Path + Vue 打包成 Image
若只將 Vue Deploy 到單一 Domain 則比較單純，但若是 Domain 的 Sub-Path，則 Vue CLI 與 Nginx 都需要加上其他設定。
使用 Docker 將 Nginx + Reverse Proxy + Vue 打包成 Image
實務上會遇到有些 API 並沒有開放 CORS，或希望所有 API 統一由 Web Server 出去，此時可利用 Nginx 提供 Reverse Proxy，並自行擴充 NPM Script，最後只要下 yarn docker 就可一鍵建立 Docker Image。
使用 Docker 將 Nginx + Vue 打包成 Image
Vue CLI 提供 yarn build 將 HTML / CSS / JS 編譯到 dist 目錄下，我們可利用 Nginx 當 Web Server，並自行擴充 NPM Script，最後只要下 yarn docker 就可一鍵建立 Docker Image。
使用 Docker 打造 Vue 開發環境
要開發 Vue 最少要安裝 NVM、Node、Yarn、Vue CLI 四種工具，對於初學者可能是種負擔，可將這些工具打包成 Docker，只要啟動 Container 後，就可立即開發 Vue。