将vue-cli 2.x的项目升级到3.x

最新推荐文章于 2025-07-05 15:05:21 发布

转载最新推荐文章于 2025-07-05 15:05:21 发布 · 535 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/conglvse/p/10008403.html

文章标签：

#javascript #json #webpack #ViewUI

本文详细记录了从Vue CLI 2.x项目升级到3.x的过程，包括依赖更新、配置调整及常见问题解决，如修复空白页面、jQuery兼容性和ESLint警告。

尝试将vue-cli 2.x的项目升级到3.x，记录一下升级过程，和遇到的坑

1. 直接复制替换src文件夹
2. 安装项目需要的依赖 (可以将原来package.json dependencies下需要的直接复制过来，然后运行npm i)
3. 安装完后运行npm run serve （如果启动服务不习惯npm run serve，可以将package.json的serve改成dev）

项目是启动了，页面确是空白的，出现如下信息

报错原因：引入vue时，采用里runtime形式的文件

要将这个错误引用纠正成vue/dist.vue.esm.js

查看cli2.X的版本，在webpack.base.conf.js配置文件中已经添加了这个代码，如下图

解决方法：
在项目的根目录下添加配置文件vue.config.js，将上图这段代码复制粘贴到vue.config.js中，然后重启服务
代码如下：

const path = require('path')
function resolve (dir) {
    return path.join(__dirname,dir)
}

module.exports = {
    configureWebpack: config => {
        config.resolve = {
           extensions: ['.js', '.vue', '.json'],
            alias: {
              'vue$': 'vue/dist/vue.esm.js',
              '@': resolve('src'),
            }
        }
    },
}

使用jquery报错，原来2.x添加第三方插件的方法不行了

解决方案：
main.js 里原来用import $ from "jquery"引用的改成

const $ = require("jquery");
window.$ = $;

原因请看下图：

基于jquery的插件使用require()

远行后，jquery可以用了，但eslint一直报'$' is not defined
解决方法1：在.eslintrc.js文件里env:{}里加jquery: true

解决方法2： 在使用$的页面加上/* global $ */

更新中...

转载于:https://www.cnblogs.com/conglvse/p/10008403.html