vue2+vite+vue-cli5 实现vite开发webpack打包

JokerSoulClub

已于 2023-01-18 11:01:07 修改

阅读量3.5k

点赞数 2

分类专栏： vue typescript 文章标签： vue.js webpack

于 2022-09-30 17:36:25 首次发布

本文链接：https://blog.csdn.net/JokerSoulClub/article/details/127126138

版权

vue 同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

typescript

2 篇文章 0 订阅

订阅专栏

20221008补充一条，如果需要兼容IE，需要修改.browserslistrc为

> 1%
last 2 versions
IE 11
IE 10

去除自带的not dead，

1. 为何要用vite开发，但是webpack打包

主要是因为即想要得到vite的高效开发模式（免编译）但是最后又想要兼容到IE9（ps，vite自带插件最多IE11而且打包出两份代码）

2. 实现流程

主要通过利用vue-cli5构建vue2项目（vue3不兼容IE），然后用vite-plugin-vue2实现vite开发（不需要使用它打包）

2.1 vue-cli5

推荐升级使用vue-cli5，可以避免很多问题，
例如vue-cli5默认会出现vue.config.js，
vue-cli4.3 生成的typescript 的vue项目中typescript版本过低导致报错
vue-cli4.3 很多vue.config.js的配置无效，例如 runtimeCompiler:true

npm install -g @vue-cli

2.2 创建vue项目

Use class-style component syntax 这儿先选择n，如果你希望项目依然可以兼容原来的非class写法的话，这个先选n，后面手动在package.json的dependencies加上

    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^9.1.2",

最后记得选择In dedicated config files 为Y,
typescript可选可不选

2.3 兼容vite

这部分我参考了这篇文章，但是对其中部分操作进行了修正webpack项目中使用vite加速的兼容模式详解

2.3.1 index.html处理

vite需要index.html在根目录，那就把index.html拷贝到根目录，这儿需要删除里面原有的htmlWebpackPlugin相关的代码，否则vite会报错，
另外还需要注入main函数给index.html

接下来在根目录下添加command文件夹，并在其中新建htm.js和vite.js（node启动用）
html.js 主要作用是在webpack打包前把index.html拷贝一份到public目录下

// ./command/html.js
const path = require('path')
const fs = require('fs')
// 把 index.html 拷贝到 public 下
fs.copyFileSync(path.resolve('./index.html'), path.resolve('./public/index.html'))

为何不保留public下的index.html呢，这就是一个坑，本人已经踩过了，
当public下存在index.html时，vite启动后无法正常给index.html注入main函数
因此需要vite.js

const path = require('path')
const fs = require('fs')
// vite启动时，需要删除public 下的index.html
if(fs.existsSync(path.resolve('./public/index.html'))){
    fs.unlinkSync(path.resolve('./public/index.html'));
}

然后就是新建vite.config.js
在里面配置vite-plugin-html实现main函数注入，具体可以参考之前提到的那篇文章

然后就是设置vite-plugin-vue2等插件到vite.config.js

2.3.2 启动项目配置

package.json中script部分

    "vite": "node ./command/vite.js && vite",
    "serve": "node ./command/html.js && npm run transformJs && vue-cli-service serve",
    "build": "node ./command/html.js && npm run transformJs && vue-cli-service build",
    "transformJs": "babel --plugins @babel/plugin-transform-modules-commonjs --presets=@vue/cli-plugin-babel/preset ./config -d ./config_cm"

我这提示需要babel7.0以上，卸了原来的6.x，重装7.0

npm uninstall babel-cli
npm uninstall babel-core
npm install @babel-cli
npm uninstall @babel-core

然后安装 @babel/plugin-transform-modules-commonjs 和 @vue/cli-plugin-babel 即可
npm run vite 表示vite启动

2.3.3 vite和webpack公用一个调试devServer

本来其实可以不用的，但是有些情况下，需要即时的看下webpack下的IE兼容情况，而不是每次都需要打包部署后查看
文章中提供了实现，就是上一节中的babel的作用，但是实际测试发现vue-cli5会检测devServer配置字段，
在根目录下新建config文件夹，然后新建config/index.js
20230118补漏，根目录下还要再建一个config_cm/index.js
因为vue.config.js中无法使用export语法导出的js需要把config/index.js 通过babel转换为config_cm/index.js后，在vue.config.js中引入

export default function (webpackFlag) {
    let config = {
        host: '0.0.0.0',
        port: 12003,
        https: false,
        proxy: {
            "/_api": {
                //target: "http://172.27.148.96:8871",
                //target: "http://32.142.240.253:8871",  //写地址
                target: "http://localhost:8090",
                ws: true,  // 允许跨域
                changeOrigin: true,  //允许跨域
                /*改动一下，由于vite.config和vue.config path重写不同*/
                //pathRewrite: {
                //    "^/_api": ""
                //},
                timeout: 60000
            }
        }
    }
    if (webpackFlag === true) {
    /*改动一下，由于vite.config和vue.config path重写不同*/
    	config.proxy["/_api"].pathRewrite ={
            "^/_api": ""
        }
        return config;
    }
    else {
        config = Object.assign(config, {
            hotOnly: true,
            disableHostCheck: true
        })
        /*改动一下，由于vite.config和vue.config path重写不同*/
        config.proxy["/_api"].rewrite=(path) => path.replace(/^\/_api/,'');
        return config;
    }
}

相比原文章直接导出固定的config会导致vue-cli5启动时检测到不合法的字段而失败，我这儿导出了函数，并支持传入flag得到不同的config。
相应的vue.config.js中devServer要这么写

const path = require('path')
function resolve(dir) {
    return path.join(__dirname, dir)
}
const { defineConfig } = require('@vue/cli-service')
const getDevServer = require(resolve('config_cm')).default  //此处vue.config.js中使用了经过babel转换后的config_cm
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:getDevServer(true)
})

vite.config.js中这么写

import getDevServer from './config/index.js'   //vite中就不需要使用babel转换的代码
...
{
server:getDevServer(),
}
...

3. 主要配置代码（用了ts）

vue.config.js 其他配置自己加

const path = require('path')
function resolve(dir) {
    return path.join(__dirname, dir)
}
const { defineConfig } = require('@vue/cli-service')
const getDevServer = require(resolve('config_cm')).default
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:getDevServer(true)
})

vite.config.js 参考webpack项目中使用vite加速的兼容模式详解并修改所得

// vite.config.js
import getDevServer from './config/index.js'
import { defineConfig, loadEnv } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { createVuePlugin } from "vite-plugin-vue2";
// import requireTransform from 'vite-plugin-require-transform';

export default defineConfig(({ mode }) => {
    const envPrefix = ['VUE']
    const env = loadEnv(mode, process.cwd(), envPrefix)
    const define = {
        'process.env.NODE_ENV': '"development"',
        'process.env.BASE_URL': '"/"',
        'process.env.VITE': true
    }
    for (const [key, value] of Object.entries(env)) {
        define[`process.env.${key}`] = `"${value}"`
    }
    // 加载环境变量，因为 vite 中不会加载以 VUE 开头的，我们得自己指定下
    return {
        build: {
            // 设置vite打包大小控制
            chunkSizeWarningLimit: 10000,
        },
        resolve: {
            extensions: [".vue", ".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
            alias:{
                '@': path.resolve(__dirname, './src/')
            },
            // alias: [
            //     // 针对以 ~@/[包名称]开头的，替换为 node_modules/@[包名称]
            //     { find: /^(~@)(?!\/)(.+)/, replacement: path.join('node_modules/@$2') },
            //     // 针对以 ~@/ 开头，替换为 src/
            //     { find: /^~@\//, replacement: path.join(__dirname, 'src/') },
            //     // 针对以 @/ 开头的，替换为 src/
            //     { find: /^@\//, replacement: path.join(__dirname, './src', '/') }
            // ],
        },
        server:getDevServer(),
        define,
        plugins: [
            // requireTransform({
            //     fileRegex: /.js$|.vue$|.ts$/
            // }),
            createSvgIconsPlugin({
                // 指定要缓存的文件夹
                iconDirs: [path.resolve(process.cwd(), 'src/assets/svgs')],
                // 指定symbolId格式
                symbolId: '[name]'
            }),
            createVuePlugin(),
            createHtmlPlugin({
                minify: true,
                template: './index.html',
                entry: '/src/main.ts', // 这个会帮我们注入入口 js 文件
                inject: {
                    data: {
                        // 这是我们 index.html 用到的环境变量
                        ...env
                    }
                }
            })
        ]
    }
})

package.json部分
需要class组件写法的加上
“vue-class-component”: “^7.2.3”,
“vue-property-decorator”: “^9.1.2”,
可以实现class组件写法和原来的非class写法在typescript下兼容
需要注意的是下面的transformJs在使用vue-cli serve或者build时，需要把/config/index.js转换为/config_cm/index.js供vue.config.js使用

{
  "scripts": {
    "vite": "node ./command/vite.js && vite",
    "serve": "node ./command/html.js && npm run transformJs && vue-cli-service serve",
    "build": "node ./command/html.js && npm run transformJs && vue-cli-service build",
    "transformJs": "babel --plugins @babel/plugin-transform-modules-commonjs --presets=@vue/cli-plugin-babel/preset ./config -d ./config_cm"
  },
  "dependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.18.6",
    "core-js": "^3.8.3",
    "vite": "^3.1.3",
    "vite-plugin-html": "^3.2.0",
    "vite-plugin-svg-icons": "^2.0.1",
    "vite-plugin-vue2": "^2.0.2",
    "vue": "^2.6.14",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "less": "^4.0.0",
    "less-loader": "^8.0.0",
    "typescript": "~4.5.5",
    "vue-template-compiler": "^2.6.14"
  }
}

顺便把tsconfig.json也提供下吧

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "noImplicitAny":false,
	  "skipLibCheck": true,
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}