如何查看vue项目vue版的本

本篇文章给大家分享的是有关如何查看vue项目vue版的本,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

<强>查看cli版本,执行如下:

vue - v

<强>查看vue版本

npm列表vue

<强> vue老项目升级vue-cli3.0问题总结

<强>升级步骤

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

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

3,把路由器从目录文件夹改为文件,src/路由器/index.js提高一层变成src/路由器。js

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

5,将原项目的index . html及标识。ico覆盖到新项目的公众中

6,将原项目的静态文件夹拷贝到新项目的公众中

7,修改包。json文件,保持和原有项目一致即可

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

删除命令:

npm卸载vue-cli - g

安装@vue/cli命令:

npm安装- g @vue/cli

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

<强> 1,找不到vue文件

CMD中的报错

这些依赖项并没有发现:

* @/观点/指数指数。/src/路由器。js

* @/视图/索引/otherIndex。/src/路由器。js

安装它们,您可以运行:npm安装——拯救@/视图/索引/索引@/视图/索引/其他

页面上的报错

/src/router.js 　　模块没有找到: 　　错误:停下来# 39;t解决& # 39;@/视图/索引/指数# 39;& # 39;D: \ VUE \ haigui-proxy \ src # 39; 　　这种报错是说明文件路径错误没有找到文件,因为在原项目中设置了“@”也就是别名(别名),也有可能在原项目中设置了扩展(可以省略扩展名),所以需要在新项目的vue.config.js中设置如下内容: 　　const path=要求(& # 39;path & # 39;);//vue.config.js顶部 　　const解决=(dir)=比;路径。加入(__dirname dir); 　　模块。出口={ 　　configureWebpack:配置=比;{ 　　对象。分配(配置,{ 　　解决:{ 　　扩展:[& # 39;. js # 39; & # 39; .vue& # 39;, & # 39; . json # 39;],//可以省略后缀名 　　别名:{//别名,在需要的时候,可以使用这些别名,来缩短路径的长度 　　& # 39;@ # 39;路径。解决(__dirname & # 39;。/src # 39;), 　　& # 39;@c& # 39;路径。解决(__dirname & # 39;。/src/组件# 39;) 　　} 　　} 　　})； 　　} 　　}

<强> 2,找不到形象图片

模块没有找到:

错误:停下来# 39;t解决& # 39;. ./. ./. ./静态/图像/avatar_gray.jpg& # 39;& # 39;D: \ VUE \ haigui-proxy \ src \ views \指数# 39;

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

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

例如,目录为公共/静态图像,图像里面存放各种图片:

<强>引入图片logo.png:

& lt; https://www.yisu.com/zixun/img src="/静态图像/logo.png ">

<强>在css中设置背景图片:

。bg { 　　背景:url (& # 39;/satic/图像/bg.jpg& # 39;); 　　}

<>强注意:

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

何时使用公共文件夹

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

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

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

<强>通过webpack的处理好处:

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

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

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

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

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

<强>需要使用相对路径引入:

如何查看vue项目vue版的本