從vue cli2遷移到cli3

• 爲啥要遷移？
  因爲打包部署的時候總會報各種莫名其妙的包版本導致的提示，所以希望借這次遷移，升級一下項目原有的依賴，因爲開發的項目是基於cube-ui這個框架的。

靜態資源

• 官方文檔-public 文件夾

• 有一些圖片，因爲canvas合成的原因並不能放置在 src/assets 文件夾內，所以需要放置在根目錄static/image 下，因爲cli3移除了 static 文件夾，轉而使用 public 文件夾存放靜態資源。

• 目錄結構變更：

  ├── static					# 靜態資源
  │   └── image				# image文件夾 
  │   	├── a				# a模塊
  │   	│	└── n.png		# n圖片
  │   	└── b				# b模塊
  │   		└── o.png		# o圖片
  

  ├── public					# 靜態資源
  │   └── img					# img文件夾 
  │   	├── a				# a模塊
  │   	│	└── n.png		# n圖片
  │   	└── b				# b模塊
  │   		└── o.png		# o圖片
  

• 代碼使用變更
  當然原來代碼裏使用這些靜態資源的路徑就要從

  <!-- note: 因爲webpack裏的 assetsSubDirectory: 'static' -->
  
  <img src="static/image/a/n.png" />
  

  ====>

  // demo.js
  <template>
  	<img :src="`${publicPath}img/a/n.png`" />
  </template>
  
  <script>
  export default {
    data() {
      return {
        publicPath: process.env.BASE_URL
      };
    }
  }
  </script>
  

• 建議：
  升級到vue-cli3後可以將 publicPath 配置爲全局變量，然後統一調用，避免的重複聲明 publicPath變量。

eslint和prettier

• Use ESLint to run Prettier

• ESLint配置

• Prettier配置

• 因爲我使用vue-cli3新建項目的時候同時勾選了eslint和prettier（並勾選了不單獨配置，所有配置均放在package.json中），這就有可能導致兩種代碼規範下的規則相互衝突。爲了解決這個問題，我增加了package.json中的配置：

  "eslintConfig": {
      "rules": {
        "prettier/prettier": [
          "error",
          {
            "singleQuote": true
          }
        ]
      }
  }
  

  可以看到 rules 內新增的內容，就是爲了防止衝突。外面最外層rules設置的是ESLint配置，內層error後面的是prettier配置，不要配置混了。

環境變量和模式

環境變量和模式

├── .env					# 在所有的環境中被載入
├── .env.production			# 只在 【production】 模式中被載入
├── .env.staging			# 只在 【staging】 模式中被載入
├── vue.config.js   		# vue-cli3配置文件
└── package.json   

• .env

  # 爲了便於將靜態資源（除了index.html）打包發送到cos
  # 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 	outputDir 的) 目錄
  VUE_APP_ASSETSDIR=static
  

• .env.production

  # 部署應用包時的基本 URL。
  VUE_APP_PUBLIC_PATH=******
  
  VUE_APP_MODE=procudtion
  

• .env.staging

  # 爲了使得該模式下靜態資源包含 hash 以便更好的控制緩存，所以必須設置爲 production
  NODE_ENV=production
  
  # 部署應用包時的基本 URL。
  VUE_APP_PUBLIC_PATH=......
  
  VUE_APP_MODE=staging
  

• vue.config.js
  這裏因爲我之前打包發送到服務器和對象存儲分爲兩個部分，所以，我仍需要配置 assetsDir。

  • 服務器 index.html
  • 對象存儲COS static（包含許多靜態資源js/css/font/img）

  module.exports = {
    publicPath: process.env.VUE_APP_PUBLICPATH || '/', // 部署應用包時的基本 URL。
    assetsDir: process.env.VUE_APP_ASSETSDIR,  // 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄
  };
  

• package.json

  {
    "scripts": {
  	"build:stage": "vue-cli-service build --mode staging",
      "build:prod": "vue-cli-service build --mode production"
    }
  }
  

小插曲[vue warn]can’t find element: #app

使用 npm run serve 後頁面一片空白（我當時整個人都是懵的，一個晚上挑燈苦研，最終還是一無所獲，到公司沒辦法，只能使用撒手鐗…省略無數字），具體辦法就是從頭新創建一個初始話項目，對比兩個項目的 index.html 差異，眼睛瞅瞎了沒找到，只能完全複製過來，成功了，迷啊。。。就此解決這個問題。頁面成功顯示內容。

參考鏈接

[1] 晚晴幽草 使用ESLint ＆ Prettier美化Vue代碼