本文主要介绍了vue项目的实现来查看vue版本和cli版本，具有很好的参考价值。希望对大家有帮助。来和边肖一起看看吧。

查看cli版本，执行如下：

vue -V

查看vue版本

npm列表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已经被划分为视图和组件，所以不需要修改它。如果不是这个结构，就需要自己去分辨了。

5.向新项目的公众覆盖原项目的index.html和favicon.ico。

6.将原始项目的静态文件夹复制到新项目的公共文件夹中。

7.修改package.json文件，使其与原始项目保持一致。

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

删除命令：

npm卸载vue-cli -g

安装@vue/cli命令：

npm安装-g @vue/cli

这里省略安装过程。已经有很多关于掘金的文章了。接下来会发生什么：

1、找不到vue文件

CMD中的错误

找不到这些依赖项：

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

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

要安装它们，您可以运行：NPM install-save @/views/index/index @/views/index/other

第页的错误报告。/src/router.js

找不到模块：

错误：无法解析“D:\ VUE \海归-代理\src”中的“@/views/index/index”

此错误表明文件路径错误，找不到文件。因为“@”是在原项目中设置的，即别名，或者原项目中可能设置了扩展名(扩展名可以省略)，所以需要在新项目的vue.config.js中设置以下内容：

const path=require(' path ')；//vue.config.js top

const resolve=(dir)=path . join(_ _ dirname，dir)；

模块.导出={

configureWebpack: config={

Object.assign(配置，{

解决：{

扩展名：['。js '，'。vue '，'。json']，//后缀可以省略。

Alias: {//Alias，可以在需要的时候用来缩短路径的长度。

@': path.resolve(__dirname，'。/src ')，

@c': path.resolve(__dirname，'。/src/components’)

}

}

});

}

}

2、找不到image图片

找不到模块：

错误：无法解析'./././static/image/avatar _ gray . jpg ' in ' D:\ VUE \海归-proxy\src\views\index '

当原项目的src和static复制到新项目时，会出现镜像路径不正确的问题。网上很多关于vue-cli3.0配置的文章都说直接把原项目的静态复制到新项目的公有。其实这是不对的。官方理由是：

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

例如，目录是public/static/image，其中存储了各种图片：

引入图片logo.png：

img src='/static/image/logo.png '

在 css 中 设置背景图片：。血糖

背景：URL('/satic/image/BG . jpg ')；

}

注意：

公共目录提供了一种应急措施。当您通过绝对路径引用它时，请注意应用程序将被部署到哪里。如果您的应用程序没有部署在域名的根，那么您需要为您的URL配置publicPath前缀。

何时使用公共文件夹

您需要在生成输出中指定文件名。

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

有些库可能与webpack不兼容，因此您别无选择，只能用单独的标签介绍它们。

通过 webpack 的处理好处：

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

文件丢失将在编译时直接报告错误，而不是在客户端生成404错误。

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

公共目录提供了一种应急措施。当您通过绝对路径引用它时，请注意应用程序将被部署到哪里。

assets文件夹用于放置由webpack处理的资源。

需要使用相对路径引入：

！-根据目录结构-

img src='./assets/images/徽标-black.png '

Img动态路径：

img :src='imgurl '

data () {

返回{

imgurl:要求('./assets/images/gou.png ')

}

}

css的背景图像：登录包装器{

背景：url('././assets/images/BG . jpg ')；

}

参考：官方解释

3、scss全局变量的配置

模块构建失败(来自。/node _ modules/sass-loader/lib/loader . js):

未定义的变量。955

border-right:1px solid $ border color；

^^^^^^^^^^^^

D:\ VUE \海归-proxy \ src \ views \ index \ index . vue中的根样式表(第955行，第33列)

如果原项目中使用了scss和全局变量，需要在vue.config.js中重新配置，全局变量文件要放在src/assets/css目录下。

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

scss: generateLoaders('sass ')。串联(

{

加载程序：' sass-resources-loader '，

选项：{

resources:path . resolve(_ _ dirname，'./src/assets/CSS/haigui-variable . scss ')

}

}

)

新项目简单多了。直接编辑vue.config.js加一节就行了：

css: {

loaderOptions: {

萨斯：{

//@/是src/的别名

数据：' @ import ' ~ @/assets/CSS/haigui-variable '；'

//如果没有设置别名，可以这样写。

//数据：“@import”。/src/assets/CSS/haigui-variable '；'

}

}

}

4、runtime-only

在模板编译器不可用的情况下，您使用的是Vue的仅运行时版本。要么将模板预编译成渲染函数，要么使用编译器附带的构建。

原因：

Vue有两种形式的代码编译器(模板)模式和运行时模式(运行时)。vue模块的package.json主字段默认为运行时模式，指向' dist/vue.runtime.common.js '的位置。

这是vue升级到2.0后就有的功能。

但是在main.js文件中，初始化vue是这样写的，是编译器模式，所以会出现上面的错误信息。

新Vue({

埃尔：' #app '，

路由器，

店，

组件：{ App }，

模板：“应用程序/”

});

解决办法：

方法一：

只需如下修改main.js中的代码

新Vue({

路由器，

店，

render: h=h(App)

}).$ mount(“# app”)

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

这也是第二种解决办法：

因为以前在我们的webpack配置文件中有单独的名称配置，如下所示

解决：{

别名：{

Vue$': 'Vue/dist/vue.esm.js' //里面是正则表达式vue的结尾。

}

}

也就是说，import vue from' vue '的代码解析为import vue from ' vue/dist/vue . ESM . js '，直接指定文件的位置，不使用main字段的默认文件位置。

因此，第二种解决方案是将webpack的以下配置添加到vue.config.js文件中，

configureWebpack: {

解决：{

别名：{

vue$': 'vue/dist/vue.esm.js '

}

}

}

既然到了这里，你会想到第三种解决方案，就是在引用vue的时候，就写成这样

从“vue/dist/vue.esm.js”导入Vue

以上vue项目的vue版本和cli版本的实现都是边肖分享的内容。希望能给你一个参考，多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。