从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代码