干掉webpack！在vue2中使用vite进行打包

前提

最近看到尤大发布了vue2.7，在新版本中同时支持使用vite进行打包。

package.json

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
},
"dependencies": {
    "vue": "^2.7.0", // 2.7后才可以使用vite打包
},
"devDependencies": {
    "@vitejs/plugin-vue2": "^2.0.1",
    "vite": "^3.0.0"
}

新建vite.config.js文件

import vue from '@vitejs/plugin-vue2'
import { defineConfig } from 'vite'
import { fileURLToPath } from 'url'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      'vue': 'vue/dist/vue.esm.js'
    },
    extensions: ['.js', '.vue']
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://192.168.1.1',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

运行

npm run dev

本作品采用《CC 协议》，转载必须注明作者和本文链接