文章

在gitlab部署vue專案到cloud run

, ,

vue 專案目前放在 gitlab 上管理，為什麼不放在 github？因為環境變數.env、config 檔案都無法進入 git 記錄，很麻煩。如果你是想要展示作品，可以放在 github，但是如果是一個有機密資料的專案，我還是都會選擇放到 gitlab，而且 gitlab 的 CICD 自動化部署真的是很方便。

閱讀更多
/0 評論/通過：

如何使用 Docker 打包 vue 專案

,

部署 vue 的 spa 網站到 GCP，可以直接部署靜態網站到 GCP 的 App Engine，也可以用 docker 打包 image，推到 GCP 的 Container Registry。

你必須先完成的事：

  1. 在電腦安裝docker
  2. cd到你的專案路徑下
閱讀更多
/0 評論/通過：

ElementUI 按需載入

,

vue專案使用element ui，在官網的範例中，是直接把載入的部分寫在main.js，可是有時候我們要載入的components一多，main.js就會變得很長，所以可以把它搬到另一個檔案，再從main.js統一引入。

閱讀更多
/0 評論/通過：

如何建立一個vue新專案與設定

,

因為常常需要開始新專案，都要重新設定，所以這幾天找時間把一個初始專案的template架起來，可以從github上參考。

這邊使用的是vue 2 + vue cli 4

如果你想看vue3的建立新專案方法，請參考下面這篇文章：

如何建立一個vue新專案與設定

 

一、安裝vue cli

要快速建立一個專案，一定要知道cli，它可以自動幫你架構好一種通用的架構，並且在建立的時候就可以選擇一般大眾常用的套件，像是sass、axios、unitest、router…之類的。安裝方式可以參考官網。

閱讀更多
/0 評論/通過：

使用Docker 打包 Nuxt.js

,

使用 nuxt 無非就是為了 ssr，但是在部署 nuxt 的時候，他是需要 server 跑起來才有辦法做到 ssr，不像一般 spa 只需要部署靜態網站，所以最簡單的方法就是使用 docker 打包。

閱讀更多
/0 評論/通過：

從零開始建立一個nuxt.js專案

,

最近終於要從後台系統脫離，前台網站因為是不用登入就可以看到，所以 SEO 是少不了的，這樣以 SPA 方式去開發一定會GG，因為所有內容都由 JS 產生，非原本的 HTML，這時候就需要 SSR 技術，預先 rendern 好 HTML 給搜尋引擎去找，而 nuxt.js 就是在 vue 的架構上去實踐 SSR。

閱讀更多
/0 評論/通過：

終端機啟動專案後自動開啟視窗

,

在使用cli3 搭配 yarn serve 時，自動打開該 port 號的視窗。

方法一：

在package.json檔案中設定

閱讀更多
/0 評論/通過：

在vue cli3 專案中使用lodash

, 
import _ from "lodash";

先在會使用到的組件內引入lodash

methods: {
    func(){
        let lodashFunc = _.debounce(this.innerFunc(),1000);
   
        lodashFunc();
    },
    
    innerFunc(){
        console.log('dddd);
    }
}
/0 評論/通過：

vue cli 3 設定檔 vue.config.js

,

使用 vue cli 3 指令 yarn 新建專案，vue官網建議使用vue.config.js檔案覆蓋webpack.config.js

module.exports = {
  devServer: {
    port: 6800,
    open: true
  },
  publicPath: 
    process.env.NODE_ENV === "production" ? "/vue-spotify" : "/",
  configureWebpack: {
    resolve: {
      alias: {
        "@C": "@/components",
        "@L": "@/layout",
        "@V": "@/views",
        "@SCSS": "@/scss",
        "@U": "@/utils",
        "@A": "@/assets"
      }
    }
  },
  css: {
    loaderOptions: {
      scss: {
        data: `
                @import "@SCSS/utils/_variables.scss";
                @import "@SCSS/utils/_mixins.scss";
              `
      }
    }
  }
};
/0 評論/通過：

在vue專案中讀取package.json資料

,

先在vue.config.js中加入plugin定義

module.exports = { 
  chainWebpack: config => {
    config.plugin("define").tap(definitions => {
      definitions[0]["process.env"]["PACKAGE_VERSION"] = JSON.stringify(
        require("./package.json").version,
      );
      return definitions;
    });
  },
};

讀取

let version = process.env.PACKAGE_VERSION;
/0 評論/通過：