启动新项目

1. vue-cli@4起一个项目

2. 安装vite及插件

   npm i vite vite-pugin-vue2 -D
   

3. 修改配置

   1. 修改 package.json 中的 script.dev="vite"

   2. 将public/index.html迁移到根目录，并手动引入js

      <script type="module" src="/src/main.js"></script>
      

   3. 修改配置文件vite.config.js

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

   4. 如果是history路由模式，还需要额外配置

      // router/index.js
      const router = new VueRouter({
        mode: "history",
        base: import.meta.env.BASE_URL, // vite没有process.env
        routes
      });
      

好，npm run dev启动。

迁移老项目

上面步骤是新建一个工程的做法，下面开始迁移老项目。梳理下老项目的技术栈：

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --env.pageName", // 开发命令，可以启动全部项目，或者一个项目，比如商品中心
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build-all.js --buildTarget=prod  && npm run build:vendor prod", // 构建生产包
    "build:one": "node build/build.js --buildTarget=prod --pageName",
    "build:vendor": "webpack --config build/build-vendor/build.js --env.target ",
    "static-server": "http-server ./dist", // 本地启动服务调试
    "express": "node build/bin/server.js", // 本地启动express服务
    "hooks": "node build/bin/hooks.js", // 设置git hook，本工程没有严格遵循代码规范，pass
    "mock": "node mock/mockServer.js", // 本地起mock，无人使用，pass
    "dev:mock": "concurrently \"npm run dev\"  \"npm run mock\"", // 本地开发 + mock，pass
    "deva": "node build/dev-server.js", // 未使用，pass
    "builda": "node build/build-new.js" // 未使用，pass
  },
  "dependencies": {
    "@xkeshi/vue-qrcode": "^1.0.0", // 二维码生成
    "axios": "^0.19.0", // ajax请求
    "blueimp-md5": "^2.12.0", // md5加密
    "china-area-data": "^5.0.1", // 中国行政区域编码
    "easemob-websdk": "^3.6.3", // 环信sdk
    "echarts": "^4.6.0", // echarts
    "el-tree-transfer": "^2.3.0", // 基于element-ui的树形穿梭框
    "element-china-area-data": "^5.0.0", // 中国行政区域编码
    "element-ui": "^2.12.0", // ui框架
    "file-saver": "^2.0.2",
    "html2canvas": "^1.0.0-rc.5",
    "js-cookie": "^2.2.1",
    "jsbarcode": "^3.11.0",
    "jwt-js": "^0.5.0",
    "normalize.css": "^8.0.1",
    "nprogress": "^0.2.0",
    "throttle-debounce": "^2.1.0",
    "v-charts": "^1.19.0",
    "v-distpicker": "^1.2.2",
    "vant": "^2.12.19",
    "vue": "^2.5.2",
    "vue-amap": "^0.5.10",
    "vue-clipboard2": "^0.3.1",
    "vue-drag-resize": "^1.3.2",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.0.1",
    "vuedraggable": "^2.24.0",
    "vuex": "^3.1.1",
    "xlsx": "^0.15.6"
  },
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/plugin-transform-runtime": "^7.7.6",
    "@babel/polyfill": "^7.7.0",
    "@babel/preset-env": "^7.7.6",
    "@babel/runtime": "^7.7.6",
    "autoprefixer": "^7.1.2",
    "babel-eslint": "^10.0.3",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "body-parser": "^1.19.0",
    "chalk": "^2.0.1",
    "chokidar": "^3.2.2",
    "concurrently": "^5.0.0",
    "copy-webpack-plugin": "^4.0.1",
    "core-js": "^2.6.11",
    "css-loader": "^0.28.0",
    "el-tree-transfer": "^2.3.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "execa": "^5.0.0",
    "express": "^4.17.1",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "happypack": "^5.0.1",
    "html-webpack-plugin": "^2.30.1",
    "http-proxy-middleware": "^0.20.0",
    "http-server": "^0.11.1",
    "inquirer": "^7.3.3",
    "node-notifier": "^5.1.2",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "os": "^0.1.1",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "sass-loader": "^7.3.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "socket.io": "^3.0.4",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },

踩坑记录

问题1

 [vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it?

原webpack项目是安装node-sass和sass-loader，直接安装sass即可

npm i sass -D

参考资料

vite中文官网 (opens new window)

Vite2搞Vue2？这题我会 (opens new window)