您好,登录后才能下订单哦!
本篇文章给大家分享的是有关如何查看vue项目的vue版本,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
查看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版本,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。