相思资源网 Design By www.200059.com

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 "htmlcode">
// 修改执行脚本
"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')

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

标签:
vue-cli2项目迁移日志,vue-cli,迁移日志

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“详解vue-cli@2.x项目迁移日志”

暂无详解vue-cli@2.x项目迁移日志的评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。