嘗試將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 $ */
更新中...