vue项目查看vue版本及cli版本的实现方式


Posted in Javascript onOctober 24, 2020

查看cli版本,执行如下:

vue -V

查看vue版本

npm list vue

补充知识:vue老项目升级vue-cli3.0问题总结

升级步骤

1、 删除原vue-cli并安装vue-cli3.0

2、删除新项目中src下的内容,把原项目中src目录覆盖到新项目中

3、把router从目录文件夹改为文件,src/router/index.js提高一层变成src/router.js

4、 我的项目中src已经分为了views和components所以无需修改,如果不是这个结构需要自己区分下

5、将原项目的index.html及favicon.ico覆盖到新项目的public中

6、 将原项目的static文件夹拷贝到新项目的public中

7、 修改package.json文件,保持和原有项目一致即可

8、 创建并配置vue.config.js文件

删除命令:

npm uninstall vue-cli -g

安装@vue/cli命令:

npm install -g @vue/cli

我在这里省略安装流程,掘金上已经有很多文章了,下面说下会遇到的问题:

1、找不到vue文件

CMD中的报错

These dependencies were not found:

* @/views/index/index in ./src/router.js

* @/views/index/otherIndex in ./src/router.js

To install them, you can run: npm install --save @/views/index/index @/views/index/other

页面上的报错

./src/router.js
Module not found:
Error: Can't resolve '@/views/index/index' in 'D:\VUE\haigui-proxy\src'
这种报错是说明文件路径错误没有找到文件,因为在原项目中设置了“@”也就是alias(别名),也有可能在原项目中设置了extensions(可以省略扩展名),所以需要在新项目的vue.config.js中设置如下内容:
const path = require('path'); // vue.config.js顶部
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
 configureWebpack: config => {
 Object.assign(config, {
  resolve: {
  extensions: ['.js', '.vue', '.json'], // 可以省略后缀名
  alias: { // 别名,在require的时候,可以使用这些别名,来缩短路径的长度
   '@': path.resolve(__dirname, './src'),
   '@c': path.resolve(__dirname, './src/components')
  }
  }
 });
 }
}

2、找不到image图片

Module not found:

Error: Can't resolve '../../../static/image/avatar_gray.jpg' in 'D:\VUE\haigui-proxy\src\views\index'

当把原项目的src和static拷贝到新项目后,就会出现图片路径不对的问题,网上很多有关vue-cli3.0配置的文章都说的是把原项目的static直接拷贝到新项目的public中,其实这是不对,官方给出的原因是:

任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 webpack。需要通过绝对路径来引用它们。

例如,目录为public/static/image,image里面存放各种图片:

引入图片logo.png:

<img src="/static/image/logo.png" >

在 css 中 设置背景图片:

.bg {
background: url('/satic/image/bg.jpg');
}

注意:

public 目录提供的是一个应急手段,当你通过绝对路径引用它时,留意应用将会部署到哪里。如果你的应用没有部署在域名的根部,那么你需要为你的 URL 配置 publicPath 前缀。

何时使用 public 文件夹

你需要在构建输出中指定一个文件的名字。

你有上千个图片,需要动态引用它们的路径。

有些库可能和 webpack 不兼容,这时你除了将其用一个独立的 标签引入没有别的选择。

通过 webpack 的处理好处:

脚本和样式表会被压缩且打包在一起,从而避免额外的网络请求。

文件丢失会直接在编译时报错,而不是到了用户端才产生 404 错误。

最终生成的文件名包含了内容哈希,因此你不必担心浏览器会缓存它们的老版本。

public 目录提供的是一个应急手段,当你通过绝对路径引用它时,留意应用将会部署到哪里。

assets文件夹就是用来放置经过webpack处理的资源的

需要使用相对路径引入:

<!-- 具体根据目录结构来 -->

<img src="../assets/images/logo-black.png">

img动态路径:

<img :src="imgurl">
data () {
return { 
imgurl: require("../assets/images/gou.png") 
}
}

css 背景图:

.login-wrapper {
 background: url('../../assets/images/bg.jpg');
}

参考:官方解释

3、scss全局变量的配置

Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Undefined variable. 955 │ 
 border-right: 1px solid $borderColor;  
  ^^^^^^^^^^^^
root stylesheet in D:\VUE\haigui-proxy\src\views\index\index.vue (line 955, column 33)

若原项目中使用了scss并且使用了全局变量,需要在vue.config.js中重新配置,并把全局变量文件放到src/assets/css目录下。

在原项目中需要在build/utils.js中进行配置

scss: generateLoaders('sass').concat(
 {
 loader: 'sass-resources-loader',
 options: {
  resources: path.resolve(__dirname, '../src/assets/css/haigui-variable.scss')
 }
 }
)

新项目中就简单的多,直接编辑vue.config.js,加入一节内容即可:

css: {
 loaderOptions: {
 sass: {
  // @/ 是 src/ 的别名 ~是必须有要加的
  data: '@import "~@/assets/css/haigui-variable";'
  // 如果没有设置别名可以这么写
  // data: '@import "./src/assets/css/haigui-variable";'
 }
 }
}

4、runtime-only

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有两种形式的代码 compiler(模板)模式和runtime模式(运行时),vue模块的package.json的main字段默认为runtime模式, 指向了"dist/vue.runtime.common.js"位置。

这是vue升级到2.0之后就有的特点。

而在main.js文件中,初始化vue却是这么写的,这种形式为compiler模式的,所以就会出现上面的错误信息。

new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
});

解决办法:

方法一:

将main.js中的代码修改如下就可以

new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

到这里我们的问题还没完,那为什么之前是没问题的,之前vue版本也是2.x的呀?

这也是第二种解决办法:

因为之前我们的webpack配置文件里有个别名配置,具体如下

resolve: {
 alias: {
  'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式 vue结尾的
 }
}

也就是说,import Vue from ‘vue' 这行代码被解析为 import Vue from ‘vue/dist/vue.esm.js',直接指定了文件的位置,没有使用main字段默认的文件位置。

所以第二种解决方法就是,在vue.config.js文件里加上webpack的如下配置即可,

configureWebpack: {
 resolve: {
 alias: {
  'vue$': 'vue/dist/vue.esm.js' 
 }
 }
}

既然到了这里就会想到第三中解决方法,那就是在引用vue时,直接写成如下即可

import Vue from 'vue/dist/vue.esm.js'

以上这篇vue项目查看vue版本及cli版本的实现方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
微信小程序 同步请求授权的详解
Aug 04 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
微信小程序实现授权登录
May 15 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
Ant Design的Table组件去除
Oct 24 #Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 #Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 #Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 #Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 #Javascript
jquery插件懒加载的示例
Oct 24 #jQuery
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 #Javascript
You might like
组合算法的PHP解答方法
2012/02/04 PHP
PHP防止跨域提交表单
2013/11/01 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
Python装饰器用法实例总结
2018/05/26 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
python 用下标截取字符串的实例
2018/12/25 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
python装饰器原理与用法深入详解
2019/12/19 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
教师节横幅标语
2014/10/08 职场文书
2014年会计工作总结
2014/11/27 职场文书
同学聚会邀请函
2015/01/30 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
远程教育培训心得体会
2016/01/09 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python