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 相关文章推荐
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
js替代copy(示例代码)
Nov 27 Javascript
javascript时间函数大全
Jun 30 Javascript
js中的json对象详细介绍
Oct 29 Javascript
整理一下常见的IE错误
Nov 18 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
JS打印彩色菱形的实例代码
Aug 15 Javascript
layui use 定义js外部引用函数的方法
Sep 26 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中的日期加减方法示例
2014/08/21 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
幼儿园运动会加油词
2014/02/14 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
家访教师心得体会
2016/01/23 职场文书
2016中秋节广告语
2016/01/28 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技