[指南] Vue-Cli 發佈時輸出 Copyright 於 CSS 和 JS 檔內

近期專案開發中,遇上 IT 端要求要做到程式碼保護的要求。這時,在打包輸出的 *.js 和 *.css 檔案中,需要包含一些特定的程式碼和版權宣告,這篇記錄下加入這些資訊的方式。
vue.js logo vue


Vue-Cli 3 以後,內建是採用 webpack 打包。若要調整這些額外的設定,那你需要在專案的根目錄新增 vue.config.js 檔案。

情境

在每支拆分出的 *.js 檔中,加上版權宣告

vue.config.js ,加入以下的段落:

關鍵字為:preamble,另外在 Vue-cli 中,是採用 terser-webpack-plugin 這支外掛,所以要看設定方面的細節,可以點開 terser-webpack-plugin 的 Github。在內文中有表明它是採用 terser 的套件,所以相關的設定會在 terserOptions 中。

這樣子的打包輸出結果,會在每一支 js 檔案的第一行,加上 /* This is license. */。

在每支拆分出的 *.css 檔中,加上版權宣告

這點就會有一些難度,因為沒有套件可以做到如同 preamble 的效果,僅能使用如 /* ! YOUR CONTENT */ 這類的語法,讓 webpack 打包的時候不會忽略這些版權宣告的文字

不想要拆分 JS 和 CSS

這點是屬於 webpack 的預設行為,所以你需要在 chainWebpack 的設定中刪除 splitChunks 的任務,同時將 filenameHashing 改為 false。


參考資料

1. 如何在vue.config.js中配置vue-cli3.0打包之后不显示console

按讚加入粉絲團

延伸閱讀