文章

在vue專案中不發佈上npm,直接引入另一個本地專案的檔案

看標題好像很難懂我到底想幹嘛,搞這麼麻煩幹什麼XD

因為公司的業務是有一套遊戲是用vue做的,然後幫客戶架設這個遊戲在他們的主機,換上 logo 和網址,就可以營業了。有點類似經銷我們的遊戲給客戶營業。

因為遊戲內容都一樣,我不可能遊戲更新後,我再去所有客戶那邊把程式碼再全部貼上一次。

可是我又不想把主程式用npm publish推上去給人家下載,我只是公司自己要用而已。

期望是有一個主遊戲程式,定期維護更新,然後有新客戶就新增一個空白專案,裡面放logo圖檔和網址的環境變數,再下載主遊戲程式的最新版本;這樣遊戲有調整,其他客戶只要更新到最新版本就可以了。

閱讀更多

webpack區分不同環境的api url

常常我們會把「前端本身跑專案的方式的環境」跟「開發流程的環境」搞混,都是叫做環境,但是我當初也是搞了很久才弄懂(汗

 

前端的專案環境通常由 webpack 區分成:

  • development:在本地跑起node serve專案,為方便開發而使用的方式。
  • productionwebpack打包後產生的靜態檔案,會排除沒用到的依賴,部署要用的就是這種打包檔,一般會放在/dist裡。

開發流程環境通常會區分以下幾種:

  • development:工程師自己再開發的時候使用的環境。
  • sit:如果公司有QA團隊,這個環境會給QA測試。
  • uat:通過QA測試之後,會放到uat環境給客戶測試(到這邊都還只是測試)
  • production:正式環境,就是一般使用者會看到的釋出版本。

後端也會這樣區分,所以會關乎到你api路徑的設定。

閱讀更多

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";
              `
      }
    }
  }
};