Element-UI + Vue2 从Vue-cli迁移至Vite

super·田

已于 2023-11-08 18:25:52 修改

阅读量537

点赞数 2

文章标签： vue.js 前端前端框架 elementui

于 2023-10-27 13:38:53 首次发布

本文链接：https://blog.csdn.net/qq_42785284/article/details/134049414

版权

一: 删除package.json文件中相关依赖

1: 删除vue-cli相关依赖

  "@vue/cli-plugin-babel": "~4.5.0",
  "@vue/cli-plugin-eslint": "~4.5.0",
  "@vue/cli-service": "~4.5.0",

2: 删除babel相关依赖

    "babel-eslint": "^10.1.0",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-lodash": "^3.3.4",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",

3:删除webpack相关依赖

    "hard-source-webpack-plugin": "^0.13.1",
    "compression-webpack-plugin": "^6.1.1",
    "lodash-webpack-plugin": "^0.11.6",
    "webpack-bundle-analyzer": "^4.4.2"
    "webpack-cli": "^4.3.0"

二:安装pnpm

pnpm需要node版本大于 16.14.0,如果需要兼容旧项目使用node低版本,推荐安装nvm

npm i -g pnpm
# 淘宝源
pnpm config set registry https://registry.npm.taobao.org  
pnpm config set disturl https://npm.taobao.org/dist
pnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  
pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  
pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  
pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  
pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  
pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  
pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python

三:安装vite相关依赖

安装vite和vite-plugin-vue2

pnpm add vite vite-plugin-vue2 -D

四:在项目根目录新建vite.config.js替换vue.config.js

import { defineConfig } from 'vite'

import { createVuePlugin } from 'vite-plugin-vue2'

export default ({ mode }) => {
  return defineConfig({
    plugins: [
      createVuePlugin({
        jsx: true
      })
    ]
  })
})

五:移动index.html文件到项目根目录

1: 移动public/index.html到代码根目录（与package.json文件平级)

在body标签中新增如下：

<!-- 指明加载main.js -->
<script type="module" src="/src/main.js"></script>

替换htmlWebpackPlugin插件注入的变量

htmlWebpackPlugin是webpack插件，所以不能再使用了，vite提供了vite-plugin-html插件来向index.html注入变量

安装vite-plugin-html

pnpm add vite-plugin-html -D

2.修改vite.config.js,添加向index.html注入变量的配置

import {
	createHtmlPlugin
} from 'vite-plugin-html'

export default ({mode}) => {
	return defineConfig({
		plugins: [
			createHtmlPlugin({
				minify: true,
				inject: {
					data: {
						title: 'xxx',
						cdn: {
							css: [],
							js: []
						}
					}
				}
			})
		]
	})
}

修改index.html

<title><%= title %></title>

<% for (var i in cdn.css) { %>
    <link href="<%= cdn.css[i] %>" rel="stylesheet">
<% } %>

<% for (var i in cdn.js) { %>
    <script src="<%= cdn.js[i] %>"></script>
<% } %>

六:替换环境变量

出于安全考虑，vite只能识别以VITE_开头的环境变量了，原VUE_环境变量不生效了，同时，也不能使用process.env.xxx来读取环境变量了。需要修改vite.conf.js配置，手动添加process.env.xxx环境变量

修改vite.conf.js配置，添加环境变量

import { defineConfig, loadEnv } from 'vite'

export default ({ mode }) => {  
  const env = loadEnv(mode, process.cwd())
  return defineConfig({
    define: {
      'process.env': { ...env }
    },
  })
})

将所有 VUE_ 开头的环境变量都替换为 VITE_
将所有的 process.env.NODE_ENV 更改为 import.meta.env.MODE
将所有开头为 process.env. 全部更改为 import.meta.env.

七:添加代理

安装path-browserify

pnpm add path-browserify -D

添加vite.conf.js配置

plugins: [],
// 
server: {
    port: 8000,
    proxy: {
        '/api': {
            target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
            changeOrigin: true,
			ws: false,
			rewrite: (path) => path.replace(/^\/api/, ''),
		}
	},
},
//

八:package.json命令修改

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

九:安装postcss

pnpm add postcss autoprefixer -D

十:在写有jsx语法的文件中添加lang="jsx"

<script lang="jsx">
    ...
</script>

十一:添加@路径别名

// vite.config.js

import path from 'path-browserify'

resolve: {
    alias: [
        {
            find: /@\/.+/,
			replacement: (val) => {
				return val.replace(/^@/, path.join(__dirname, './src/'))
			},
		},
		{
			// this is required for the SCSS modules
			find: /^~(.*)$/,
			replacement: '$1'
		}
	],
	extensions: ['.js','.jsx','.vue','.json']
}

十二:处理报错

1.The following dependencies are imported but could not be resolved

如果有安装 vue-quill-editor v-viewer 依赖的,直接导入 quill/dist/quill.snow.css 会报错,使用别名可解决,类似的问题也可以这么处理

{
    find: /quill/,
	replacement: (val) => {
		return val.replace(/quill/,'vue-quill-editor')
	}
},
{
	find: /viewer/,
	replacement: (val) => {
		return val.replace(/viewer/,'v-viewer')
	}
}

2.the requested module 'xx' does not provide an export named 'defauult'

错误原因: 引入的库没有使用export default 来导出，而是直接使用export导出一些属性和方法，所以无法使用【import xxx from ''xxx'】

import * as VDistpicker from "@/libs/v-distpicker";

解决方法: 通过【import * as 别名 from 'xxx'】，通过别名就可以访问了

3.require is not defined

vite中不能使用require来导入资源,使用import 方式

import imgUrl from '图片路径'

export default {
    data:{imgUrl}
}

module 'path' has been externalized for browser compatibility

原有的path模块不能在vite中使用,需要替换为上面安装的 path-browserify模块

4.svg不显示问题

安装 vite-plugin-svg-icons

pnpm add vite-plugin-svg-icons -D

在main.js引入

import 'virtual:svg-icons-register'

存放svg图片的文件夹

在vite.config.js中配置

import path from 'path-browserify'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
 
export default defineConfig((command) => {
 return {
    plugins: [
      createSvgIconsPlugin({
        iconDirs: [path.join(process.cwd(), 'src/icons/svg')],
        symbolId: 'icon-[dir]-[name]'
      })
    ],
}
 
})

封装svg组件

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use class="svg-use" :href="symbolId" />
  </svg>
</template>
 
<script>
  import { defineComponent, computed } from 'vue'
 
  export default defineComponent({
    name: 'SvgIcon',
    props: {
      prefix: {
        type: String,
        default: 'icon'
      },
      name: {
        type: String,
        required: true
      },
      className: {
        type: String,
        default: ''
      }
    },
    setup(props) {
      const symbolId = computed(() => `#${props.name}`)
      const svgClass = computed(() => {
        if (props.className) {
          return `svg-icon ${props.className}`
        }
        return 'svg-icon'
      })
      return { symbolId, svgClass }
    }
  })
</script>
<style scope>
  .svg-icon { 
    vertical-align: -0.1em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
    fill: currentColor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
    overflow: hidden;
  } 
</style>

在main.js中加入

import svgIcon from './components/svgIcon/index.vue'
 
createApp(App).component('svg-icon', svgIcon)

使用示例

<SvgIcon name="issue"></SvgIcon>

<SvgIcon name="components-issue"></SvgIcon>

<SvgIcon name="charge-issue"></SvgIcon>

注意: 如果svg文件中有子文件夹,需要按照[文件夹名称]-[svg文件名称]方式使用
例如使用 src/icons/svg/components/add.svg
则在封装的svg组件中name属性传入 components-add

5.element-ui 表格不显示不报错

问题出在package.json中,vue版本为 2.6.11,而实际安装的版本为2.7.15

查看node_modules中vue版本实际为2.7.15

vue2.7及以后，则需要安装 @vitejs/plugin-vue2，
卸载vite-plugin-vue2，安装 @vitejs/plugin-vue2

pnpm uninstall vite-plugin-vue2

pnpm add @vitejs/plugin-vue2

// vite.config.js
import vue from '@vitejs/plugin-vue2'
import { defineConfig } from 'vite'

export　default({mode}) => {
    return defineConfig({
        plugins: [vue()]
    })
}

6: jsx文件报错

安装@vitejs/plugin-vue2-jsx

pnpm add @vitejs/plugin-vue2-jsx -D

vite.config.js

import vueJsx from '@vitejs/plugin-vue2-jsx'
plugins: [
	vueJsx()
]

7.moment 不使用中文语言包

import 'moment/locale/zh-cn'

// 替换为

import 'moment/dist/locale/zh-cn'

参考文档:

1.全网最硬核的Element-UI从Vue-cli迁移至Vite

2.通过vite-plugin-svg-icons 使用SVG图片

3.记一次诡异问题：Vite + Vue 2.7 + Element-UI el-table无法渲染的问题