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

2023-07-13 08:57:03 69

查看cli版本，执行如下：

vue-V

查看vue版本

npmlistvue

补充知识：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文件

删除命令：

npmuninstallvue-cli-g

安装@vue/cli命令：

npminstall-g@vue/cli

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

1、找不到vue文件

CMD中的报错

Thesedependencieswerenotfound:

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

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

Toinstallthem,youcanrun:npminstall--save@/views/index/index@/views/index/other

页面上的报错

./src/router.js
Modulenotfound:
Error:Can'tresolve'@/views/index/index'in'D:\VUE\haigui-proxy\src'
这种报错是说明文件路径错误没有找到文件，因为在原项目中设置了“@”也就是alias(别名)，也有可能在原项目中设置了extensions(可以省略扩展名)，所以需要在新项目的vue.config.js中设置如下内容：
constpath=require('path');//vue.config.js顶部
constresolve=(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图片

Modulenotfound:

Error:Can'tresolve'../../../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：

在css中设置背景图片：

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

注意：

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

何时使用public文件夹

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

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

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

通过webpack的处理好处：

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

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

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

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

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

需要使用相对路径引入：

img动态路径：


data(){
return{
http://www.haoziyuan.ccimgurl:require("../assets/images/gou.png")
}
}

css背景图：

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

参考：官方解释

3、scss全局变量的配置

Modulebuildfailed(from./node_modules/sass-loader/lib/loader.js):
Undefinedvariable.955│
border-right:1pxsolid$borderColor;
^^^^^^^^^^^^
rootstylesheetinD:\VUE\haigui-proxy\src\views\index\index.vue(line955,column33)

若原项目中使用了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

Youareusingtheruntime-onlybuildofVuewherethetemplatecompilerisnotavailable.Eitherpre-compilethetemplatesintorenderfunctions,orusethecompiler-includedbuild.

原因：

vue有两种形式的代码compiler（模板）模式和runtime模式（运行时），vue模块的package.json的main字段默认为runtime模式，指向了"dist/vue.runtime.common.js"位置。

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

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

newVue({
el:'#app',
router,
store,
components:{App},
template:''
});

解决办法：

方法一：

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

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

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

这也是第二种解决办法：

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

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

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

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

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

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

importVuefrom'vue/dist/vue.esm.js'

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

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

热门推荐

随机推荐