Vite+Vue3+Element-plus+less项目已完成的基础上，使用webpack打包兼容浏览器低版本webkit内核chrome

时间：2025-02-07 18:05:54

        页面已经写完，用户表示360浏览器不能打开，发现用户还在使用360安全浏览器9，版本chrome55，导致vite项目打包后页面出现白屏情况，并显示以下警告。

Fetching scripts with an invalid type/language attributes is deprecated and will be removed in M56, around January 2017. See /features/5760718284521472 for more details.

查了之后是不支持es6语法，vite官网也有写，使用的是es6语法的模块化module写法。

        网上大部分的方法是使用vite官网的插件 plugin-legacy ，并配置了 polyfills，但是我这里没有生效，所以使用了另一种方法。

        使用webpack进行打包，参考了这篇文章vuecli-vite-vue3-init 项目架子 快速开发 webpack打包 - 彭成刚 - 博客园 ()

1、安装"@vue/cli-service": "~5.0.0"

2、vuecli的配置文件代码在下文

3、修改script运行脚本选项

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "vuecli-dev": "vue-cli-service serve",
    "vuecli-build": "vue-cli-service build",
    "vuecli-lint": "vue-cli-service lint"
  },

4、 使用less在打包时遇到的less-loader版本过高的问题，出现can‘t getOption报错，所以降低了less-loader的版本，8及以上的版本都会报错

5、element-plus也要在文件中进行配置，如果不配置，无法解析el-input这类标签。

        我是进行按需自动导入的，参考官网webpack的配置，可以不用配置文件，直接在文件中配置configureWebpack的plugin，详情见下文文件代码

6、最后打包的时候运行 vuecli-build，即vue-cli-service build 命令

 代码

1、

plugin-legacy和terser是之前尝试vite插件时安装的，可以忽略。

注意eslint，语法标准太严格打包也会报错，我没有新建eslint的配置文件，直接在package中进行配置。

{
  "name": "workbench-vue3",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "vuecli-dev": "vue-cli-service serve",
    "vuecli-build": "vue-cli-service build",
    "vuecli-lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "babel-polyfill": "^6.26.0",
    "element-plus": "^2.2.6",
    "vue": "^3.2.25",
    "core-js": "^3.8.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "less": "^4.1.3",
    "less-loader": "^7.3.0",
    "vue-template-compiler": "^2.6.14",
    "@vitejs/plugin-legacy": "^1.8.2",
    "@vitejs/plugin-vue": "^2.3.3",
    "terser": "^5.15.1",
    "unplugin-auto-import": "^0.9.2",
    "unplugin-vue-components": "^0.20.1",
    "vite": "^2.9.9"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

2、

 = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

3、

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "",
      "scripthost"
    ]
  }
}

4、

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
const resolve = (dir) => (__dirname, dir)
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

 = defineConfig({
    publicPath: './',
    transpileDependencies: true,
    //配置elementui-plus
    configureWebpack:{
        plugins:[
            AutoImport({
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                resolvers: [ElementPlusResolver()],
            }),
        ]
    },
    // 打包时不生成.map文件
    productionSourceMap: false,
    chainWebpack: config => {
        ('@', resolve('src'))
        ('html').tap(args => {
            args[0].title = '待办'
            return args
        })
    },
})

搞了很久，还是对webpack和vite的了解太浅薄了，平时就是能跑就行，遇到问题就GG、、、

相关文章