Vue 开发中的一些问题简单记录,Cannot find module ‘webpack/lib/RuleSet‘

简介: Vue 开发中的一些问题简单记录,Cannot find module ‘webpack/lib/RuleSet‘

1. Vue 项目的结构

myapp/
├── dist/                               #项目构建后的输出目录
│   └── css
│   └── img
│   └── js
│   └── index.html  // 项目主入口文件
├── node_modules/                  # 项目依赖文件,其中包括很多基础依赖和自己安装的依赖
│   ├── index.html                      # 项目的入口 HTML 文件
│   └── favicon.ico                     # 网站的图标
├── public/                             # 公共资源目录
│   ├── index.html                      # 项目的入口 HTML 文件
│   └── favicon.ico                     # 网站的图标
├── src/                                # 项目源代码目录
│   ├── api/                            # 定义和管理向后端服务器发送请求的模块或服务的目录
│   ├── assets/                         # 静态资源目录
│   ├── components/                     # 存放组件目录
│   ├── router/                         # 路由配置目录
│   ├── services/                       # 同api/一样功能
│   ├── store/                          # 全局状态管理目录
│   ├── styles/                         # 同assets/一样功能
│   ├── views/                          # 页面组件目录
│   ├── App.vue                         # 根组件
│   └── main.js                         # 项目入口文件
├── .eslintrc.js                        # ESLint 配置文件
├── babel.config.js                     # Babel 配置文件
├── package.json                        # 项目配置文件
└── README.md                           # 项目说明文件

dist —— 项目构建打包后的默认输出目录,在新建项目中一开始并不存在,只有当你执行了一次构建命令(build)之后才会创建。

node_modules —— 项目依赖文件,其中包括很多基础依赖和自己安装的依赖。

public —— 存放公共资源和项目的主入口文件index.html。

src —— 项目核心文件夹:包括项目源码,各种静态资源等等。是我们开发的重点工作目录。

package-lock.json —— 版本管理使用的文件;

package.json —— 项目的基本配置信息文件,包括各种插件,依赖以及某些依赖的详细配置等(如果你选择保存在这个文件内的话);

README.md —— 项目的描述文件。

2. Vue的常见命令

2.1. Vue的依赖下载

其中:node_modules 文件夹中存放是各种项目依赖文件,包括很多基础依赖和自己安装的依赖。在做代码共享或者上传远程仓库时,建议忽略此文件夹。所以我们在拿到一个Vue项目时,一般都是没有这个文件夹的。需要我们自己使用命令去生成:

cnpm install

2.2. Vue的运行

通过cnpm run serve 命令可以在本地运行Vue应用 只有在 package.json scripts 配置了,你才能 run 的,所以不是所有的项目都能 npm run dev/build。

cnpm run serve

2.3. Vue的打包

项目构建打包后的默认输出目录,在新建项目中一开始并不存在,只有当你执行了一次构建命令(build)之后才会创建。所以我们在拿到一个Vue项目时,一般都是没有这个文件夹的。需要我们自己使用命令去生成:

cnpm run build

查看nodejs

$ node -v
v16.20.2

3. Vue的一些常见错误

这个错误是 因为 Webpack 依赖没有安装。在 package.json 文件中增加"webpack": "^4.47.0" 依赖。

相关文章
|
28天前
|
JavaScript
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
这篇文章是关于如何在webpack环境中配置Vue.js,包括安装Vue.js、解决报错、理解el与template的区别、使用SPA模式、抽离模板为对象、封装为单独的js文件、安装vue-loader时遇到的问题及解决方案,以及整个过程的总结。
69 2
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
|
2月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
83 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
28天前
|
移动开发 JavaScript 前端开发
webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
这篇文章主要介绍了如何通过配置Webpack的插件,如HtmlWebpackPlugin、uglifyjs-webpack-plugin和webpack-dev-server,来简化前端开发流程。
31 0
webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
|
3月前
|
前端开发 JavaScript API
|
3月前
|
JavaScript 测试技术
在不同 webpack 版本的 Vue 项目中配置 Storybook
在不同 webpack 版本的 Vue 项目中配置 Storybook
|
3月前
|
JavaScript
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
65 0
|
4月前
|
JavaScript 前端开发 应用服务中间件
|
2月前
|
JavaScript
webpack打包TS
webpack打包TS
131 60
|
30天前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
|
30天前
|
前端开发 JavaScript
ES6模块化和webpack打包
【10月更文挑战第5天】