vue-loader和webpack项目配置及npm错误问题的解决

作者:树?叶? 时间:2024-04-29 13:10:33 

vue-loader和webpack项目配置及npm错误

学习vue的同学都知道,想要生成一个vue项目,使用vue-cli脚手架工具直接生成项目即可,但是小编为了更加明白vue项目中一些项目文件的真正含义,从空文件开始构建项目,其中还包括webpack的一些知识点

1、在VS编辑器打开终端,npm init初始化,生成package.json文件

2、安装项目中所需要用到的包,例如webpack 、 vue 、 vue-loader等

使用命令npm i webpack vue vue-loader进行安装,如果此时报错,可以一个一个的进行安装,npm i webpack 、npm i vue 、npm i vue-loader

如果新建过程中出现以下错误:

vue-loader和webpack项目配置及npm错误问题的解决

可以看一下package.json下的name字段是不是项目名字和你安装的那个包名字相同了,如果一样就会报那个错,把项目名字改成和安装不冲突的名字

正确的运行结果应该是:

vue-loader和webpack项目配置及npm错误问题的解决

3、继续安装css-loader以及vue-template-compiler

npm i css-loader vue-template-compiler

4、新建src文件夹,新加app.vue,进行编写基本的代码

5、此时的文件是不可能进行编译的,但是当我们想要运行此项目时,可以使用webpack,webpack是一个打包器;

在根目录下建立webpack.config.js,并在里面添加配置

vue-loader和webpack项目配置及npm错误问题的解决

entry是我们这个项目文件的一个入口文件,output是打包以后的输出文件,__dirname 是表示当前文件的名字,module里面是一些loader配置

6、入口文件index.js文件也进行简单的编辑:

vue-loader和webpack项目配置及npm错误问题的解决

7、最后进行运行npm run build

根据webpack.config.js的配置,会在根目录生成一个文件夹dist,里面是输出的一些文件。

到这里,我们的项目配置就完成了!!

解决vue-loader webpack版本出现的问题

出现问题

vue-loader和webpack项目配置及npm错误问题的解决

问题描述

主要是webpack打包时出现问题报错如上

发现vue-loader 和 vue-template-compiler 版本不匹配

解决方法

npm instll
npm update

之后再运行就解决了

来源:https://blog.csdn.net/tangyuer/article/details/100188830

标签:vue-loader,webpack,配置,npm
0
投稿

猜你喜欢

  • ASP利用TCPIP.DNS组件实现域名IP查询

    2010-02-26 11:25:00
  • 不用mod_rewrite直接用php实现伪静态化页面代码

    2023-11-01 07:07:45
  • Python实现爬取逐浪小说的方法

    2022-05-26 22:31:29
  • Python语言中Tuple的由来分析

    2021-07-01 16:36:11
  • OpenCV 表盘指针自动读数的示例代码

    2023-12-29 05:46:38
  • python解析中国天气网的天气数据

    2023-01-20 18:48:39
  • 导致sql执行速度慢的几种情况盘点(生产环境踩过的坑)

    2024-01-17 17:07:21
  • python进行相关性分析并绘制散点图详解

    2023-02-25 14:45:54
  • Python中列表、字典、元组、集合数据结构整理

    2022-08-02 05:54:57
  • 如何在ADSI中查询用户属性?

    2010-06-17 12:53:00
  • shp2sqlserver 用法简析

    2024-01-17 10:37:23
  • python中的format是什么意思,format怎么用

    2022-07-31 08:51:45
  • 查找备注(text,ntext)类型字段为空的方法

    2008-08-02 12:47:00
  • 利用Matlab绘制各类特殊图形的实例代码

    2021-01-05 21:10:31
  • python中的不可变数据类型与可变数据类型详解

    2022-12-27 21:56:24
  • Mysql数据库手动及定时备份步骤

    2024-01-27 10:43:15
  • JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参

    2024-04-19 10:25:21
  • Golang中异常处理机制详解

    2024-02-17 17:05:50
  • mysql增量备份及断点恢复脚本实例

    2024-01-27 04:54:34
  • Go语言实现简单留言板的方法

    2024-02-12 05:51:42
  • asp之家 网络编程 m.aspxhome.com