拥抱下一代前端工具链-Vue老项目迁移Vite探索

• 一个开发服务器，它基于原生ES模块，提供了丰富的内建功能，如速度快到惊人的模块热更新(HRM)
• 一套构建指令，它使用rollop来打包你的代码，并且是预配置的，可输出用于生产环境的高度优化过的静态资源。

  
  

• 依赖大多为在开发时不会变动的纯 JavaScript。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会存在多种模块化格式（例如 ESM 或者 CommonJS）。
  

• Vite 将会使用 esbuild 预构建依赖。esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。

• 源码 通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。

  
  

• Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

  
  

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

<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
[vite] Internal server error: URI malformed

res = code.replace(/<%=\s+BASE_URL\s+%>/g, baseDir);
与Vue-cli相同，需要一个配置文件 vite.cofnig.js, 与原来的vue.config.js同级

npm i vite vite-plugin-vue2 -S

3.3 修改配置文件

• "serve": "vite",

• "build": "vite build",

import { defineConfig } from 'vite'import { createVuePlugin } from 'vite-plugin-vue2'
// https://vitejs.dev/config/   这一行可以增加编辑器代码提示export default defineConfig({     plugins: [       createVuePlugin({ jsx: true, // 兼容项目中的jsx组件      vueTemplateOptions: {}    }),     ],     resolve: {  extensions: ['.vue', '.js', '.ts', '.jsx', '.tsx', '.json'],       alias: [{        find: '@',        replacement: '/src'}]     },server: {    open: true, // 控制台直接打开浏览器    host: 'xxxx.jd.com', // 本地host    allowedHosts: ['.jd.com', '.jdwl.com', '.jd.co.th', '.jd.id'],    port: 80,    cors: true,    proxy: {      '/api': {        target: 'https://xxx.jd.com',        changeOrigin: true,        rewrite: path => path.replace(/^\/api/, '/api')      }    }  }, })

import.meta.env.MODE: {string} 应用运行的模式。

import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base配置项决定。 

import.meta.env.PROD: {boolean} 应用是否运行在生产环境。 

import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

export default defineConfig({  define: {    'process.env': {}  },})

// polyfillsif (typeof (window as any).global === 'undefined') {  ;(window as any).global = window}

export default defineConfig({  css: {    preprocessorOptions: {      scss: {        additionalData: '$ossHostVariable: \'import.meta\u200b.env.VUE_APP_OSS_HOST\';'      }    }  }})

import path from 'path' // 替换成import path from 'path-broswserfiy'

import requireTransform from 'vite-plugin-require-transform'export default defineConfig({  plugins: [requireTransform({})]})

const load = import.meta.glob('@/views/**/index.vue');
export const constantRoutes: any = [  {    path: '/404',    component: load['404']  },]

const SPLIT_CHUNK_CONFIG = [  {    match: /[\\/]src[\\/]_?common(.*)/,    output: 'chunk-common',  },  {    match: /[\\/]src[\\/]_?component(.*)/,    output: 'chunk-component',  },];
const rollupOptions = {  output: {    chunkFileNames: 'assets/js/[name]-[hash].js',    entryFileNames: 'assets/js/[name]-[hash].js',    assetFileNames: 'assets/static/[name]-[hash].[ext]',    manualChunks(id) {      for (const item of SPLIT_CHUNK_CONFIG) {        const { match, output } = item;
        if (match.test(id)) {          return output;        }      }
      if (id.includes('node_modules')) {        return id.toString().split('node_modules/')[1].split('/')[0].toString();      }    },  },},