VSCode 自帶的換行實在太短了，結構多的 HTML 明明只是一小段、不重要的不必換行，尤其是 Bootstrap 的 Modal 裡面帶有許多屬性，這樣一換下來就格式化成了一大段，實在是很佔高度阿，於是就有了此篇設定教學。

目前是寫 vue 檔，所以使用的是 Vetur 套件，安裝好後我們可以到以下路徑寫設定檔

檔案 → 喜好設定 → 設定 → 延伸模組 → Vetur → Format:Default Formatter Options → 在 setting.json 內編輯

到 vetur.format.defaultFormatterOptions 寫入內容





  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "printWidth": 175 // 字元超過 175 的時候會換行，包含縮排也會算在裡面
    }
  }

接著 Vue 檔的程式碼就會很長的時候才換行了。

Vite2.0 與 Vue2.x 舊專案的替換

Vite2 發布了一個月了，等了一陣子網路上有一定量的文章了，可惜的是大部分的教學還是以 Vue Cli 的 Vue2 ，舊專案升級為主，幾乎看不到「重新建立一個以 Vue2 為基礎的 Vite2 文章」，而官方也說明 Vite2 搭配 Vue3 比較好，所以就更找不到這類的文章了。

也許我是個菜雞，我到現在都還不懂為何一堆大神嫌 webpack 慢，npm run serve 確實會比較慢沒錯，但架起來時除了改變環境變數需要重啟之外，其他的程式碼也是即時更新，而且我目前一天的開發 npm run serve 也沒有很多次，但是主管一直推只好來研究看看舊的 Vue2 專案要怎麼替換成 Vite2。

如果你要在舊專案使用 Vite2 的話，請備份，其中會修改到許多地方，並不是安裝好後就可以無痛升級，需要修修改改不少地方，請有個心理準備。

作者發布通知
 官方中文文檔
 官方英文文檔
 GitHub

指令

直接在舊專案下指令

npm i vite vite-plugin-vue2 -D   //請注意是 plugin 一堆複製文章少了 L

設定檔

接著在跟目錄的地方建立 vite.config.js 寫入以下內容，現在看不懂也許以後就懂了XDDD















import { createVuePlugin } from "vite-plugin-vue2";
import { defineConfig } from "vite";
import path from "path";
export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  base: "/",
  plugins: [
    // vue()
    createVuePlugin()
  ]
});

新增/改變啟動指令

Vue Cli 啟動開發環境的時候會使用 npm run serve，現在我們要使用的是 Vite ，原先 npm script 內容還是使用 vue-cli-service ，npm run serve 還會是舊的模式， Vite 根本不理你，這裡我們要在 package.json 新增 Vite 啟動指令，目前只針對開發環境，其他的模式可參考官方文件，或是你可以直接修改現有的。



  "scripts": {
    "dev": "vite"
  }

運行錯誤

新增指令完後馬上跑一次試試 npm run dev ，舊專案使用的是 node-sass Vite 不好像不認
的樣子，菜雞不懂怎麼改只好去找官方文件，官方建議使用的是 sass，即 npm i sass 說明文件 CSS 預處理器，先不要管 node-sass 怎樣了，npm i sass 下去就對了！

接者再跑一次，跳出不同的錯誤，代表剛才 npm i sass 是可行的，新的錯誤看起來是路徑選取的問題，把 ~ 拿掉試試，接著畫面就跑出來了。

環境變數(全域變數)

很多文章都有提到 Vite2 也像 Vue Cli 支援了 .env ，只要把原先的 process.env 替換成 import.meta.env 就可以了，這是我覺得有點坑的地方，弄了好久想說為什麼都取不到 .env 變數，到了官網看了一下 .env 文件，不知道是簡繁語言用法差異問題，還是它的說明有問題，只 catch 到一點方向，後來試了一下才明白在說什麼，就和 Vue Cli 一樣要使用就必須有前綴詞 VUE_APP_ ，Vite 也一樣，前綴詞是 VITE_，使用編輯器 VS Code 的功能就可以很快地做到替換。

這樣專案就算替換完成了。

設定檔 ( vue.config.js 與 vite.config.js )

跨域

設定檔當中最常使用到的就是跨域的功能了，server proxy 官方文件寫得蠻清楚了，只是路徑重寫的方式不一樣。











export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

之後只要把作為全域變數的 API 位置由原本一長串的網址 http://jsonplaceholder.typicode.com 改為 /api 就可以了。

資源輸出

我們之前的 publicPath 和 assetsDir 是這樣寫的




module.exports = {
  publicPath: './',
  assetsDir: './sfa-fnd-ipad'
}

到了 Vite 就會是這樣







export default {
  base: "./",
  build: {
    assetsDir: './sfa-fnd-ipad'
  }
}

特別的點是，因為 Vite 在開發時是緩存的形式 ( 不打包 ) ，所以官方把 assestsDir 歸類到 build 設定

快取(編輯產生的檔案名稱)

待續，沒有人寫到這方面的，官方也沒有相關的設定，哪天有看到再來補這塊的內容。

其他

如果你在產生 dist 時，遇到了某個檔案載入不到 No such XXXXXXX，請觀察那個檔案在 import 時是否少了副檔名 .vue，請補上這樣就會正常了。

參考

vue-cli 迁移 vite2 实践小结
 官方中文文檔

Miller - 工程師日常

2022-02-16

VS Code 的換行設定