详解vue-cli@2.x项目迁移日志


Posted in Javascript onJune 06, 2019

vue-cli@2.x项目迁移日志

虽然 vue-cli@3 早就已经巨普及了,新项目应该已经很少有人还有使用 vue-cli@2.x 。 但是对于一些稍微早些时候的 vue 项目,如果当时没有做一些优化、配置,随着 webpack vue 等包的升级,有一些配置已经不一样了,并且关于 vue-cli@2.x 项目的文档、博客也越来越少,如果遇到问题也许也会有麻烦,因此就想着把当前的 vue-cli@2.x 项目原地升级配置。

项目结构

vue-cli@2.x 项目结构,其中红色圈出的部分是 2.x 版本才有的。

详解vue-cli@2.x项目迁移日志

vue-cli@3.x 目录结构, 箭头指出的两个文件的作用几乎完全替代上面的 build , config 文件夹中的文件,以及根目录下的 postcss 和 babel 配置文件的作用。

详解vue-cli@2.x项目迁移日志

迁移配置

新建 babel.config.js 文件, 内容是

module.exports = {
 presets: [
  '@vue/app'
 ]
}

新建 vue.config.js 文件,内容是:

const isProduct = process.env.NODE_ENV === 'production';

module.exports = {
 publicPath: isProduct ? 'xxx' : ''
};

需要注意的是,在 vue-cli@2.x 中我们设置的 assetsPublicPath 属性,在 vue-cli@3 中已经更名为 publicPath, 这个属性可以简单理解为打包出来的 js css img 文件在被 index.html 文件引入的时候添加的前缀。

直接将 static 文件夹更名为 public ,并且将根目录中的 index.html 文件也拖进 public文件夹中。这里需要注意的是,原来我们放在 static 中的静态资源,在代码中引用的时候,路径可能会写为 /static/img/xxx.jpg, 移动到 public 文件夹中之后,需要删除 static 前缀,直接引用 /img/xxx.jpg 即可。

直接将 static 文件夹中的资源全都拖进,新建 public 文件夹

接下来改动比较多的就是 package.json中的依赖包了

// 修改执行脚本
"start": "npm run serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
// 需要手动更新一下 vue 和 vue-template-compiler 的版本,如果版本没有对象 npm start 就不成功,但是也不是严格的版本号一致,具体没研究过对应关系,直接从 vue-cli@3 初始化项目中抄版本号即可
 "dependencies": {
 ...
  "vue": "^2.6.10",
  "vue-router": "^2.3.1",
  "vuex": "^2.3.1"
 },
 // 这里的 7 个依赖都必须有,并且因为 webpack 功能被内置到 @vue/cli-service 中去了,所以原来 devDependencies 中根打包相关的依赖包都可以删除了。
 "devDependencies": {
  "@vue/cli-plugin-babel": "^3.7.0",
  "@vue/cli-plugin-eslint": "^3.7.0",
  "@vue/cli-service": "^3.7.0",
  "babel-eslint": "^10.0.1",
  "eslint": "^5.16.0",
  "eslint-plugin-vue": "^5.0.0",
  "vue-template-compiler": "^2.5.21",
  ...
 }

详解vue-cli@2.x项目迁移日志

删除原来的依赖,重新安装新的依赖

rm -rf node_modules && cnpm i

重新执行试试 npm start

此时很可能会遇到一个问题:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

是因为 vue 当前被编译的版本不对,造成这个影响主要是因为 webpack 的配置被修改引起的。 随便依照能找到很多解决办法,但是最好的办法是按照 vue-cli@3

// 将 main.js 中 new Vue 的参数修改一下形式

// vue-cli@2.x
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

// 修改为 vue-cli@3 中默认的形式
new Vue({
 router,
 render: h => h(App),
}).$mount('#app')

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
Node 模块原理与用法详解
May 13 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 #Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 #Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 #Javascript
webpack4之如何编写loader的方法步骤
Jun 06 #Javascript
vue 插件的方法代码详解
Jun 06 #Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 #jQuery
node.js的http.createServer过程深入解析
Jun 06 #Javascript
You might like
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
让python json encode datetime类型
2010/12/28 Python
python实现简单登陆流程的方法
2018/04/22 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
把pandas转换int型为str型的方法
2019/01/29 Python
python3实现字符串操作的实例代码
2019/04/16 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
Python如何给函数库增加日志功能
2020/08/04 Python
python利用platform模块获取系统信息
2020/10/09 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
《临死前的严监生》教学反思
2014/02/13 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
文秘自荐信
2014/06/28 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
给学校的建议书400字
2015/09/14 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL