升级vue-loader后报错

• 升级 “vue-loader”: “^16.1.2″后升级后报错

 Error: Cannot find module 'vue-loader/lib/plugin'
复制代码

• 解决办法：修改webpack配置文件中的VueLoaderPlugin

修改前：

const VueLoaderPlugin = require('vue-loader/lib/plugin')
复制代码

修改后:

const { VueLoaderPlugin } = require('vue-loader')
复制代码

实例化Vue方式修改

修改前：

import Vue from 'vue'
new Vue({
    el: '#J_app',
    router,
    components: { Index },
    template: '<Index/>'
})
复制代码

修改后：

import {createApp} from 'vue'
const app = createApp({
    router,
    components: { Index },
    template: '<Index/>'
})

app.mount('#J_app')
复制代码

v-for修改

修改前：

<div v-for="(item,index) in submitData" class="item">
复制代码

修改后：

<template v-for="(item,index) in submitData" :key="item.id">
    <div class="item"></div>
</template>
复制代码

Module not found

升级后报错:

 ERROR in ./node_modules/vue3-ts-flow-components/dist/index.js
    Module not found: Error: Can't resolve 'vue' in 'D:\code\erp\Public\Erp\node_modules\vue3-ts-flow-components\dist'
复制代码

解决办法：将’vue’: ‘vue/dist/vue.esm.js’,改为’vue’: ‘vue/dist/vue.esm-bundler.js’

      alias: {//resolve.alias配置项通过别名来把原来导入路径映射成一个新的导入路径。
           'vue': 'vue/dist/vue.esm-bundler.js',
           '@': path.resolve(__dirname,'../src'),
            '#': path.join(process.env.WORKDATA_PATH,'raw'),
            'jquery': path.join(commonDir,'assets/js/jquery-2.1.1.js'),
            '_': path.join(commonDir,'assets/js/lodash.js'),
     }
复制代码