我的todo日记1（调试准备工作）

最新推荐文章于 2022-09-17 17:19:35 发布

我要你好好的。

最新推荐文章于 2022-09-17 17:19:35 发布

阅读量332

点赞数

文章标签： vue webpack node.js

本文链接：https://blog.csdn.net/weixin_43845044/article/details/104871807

版权

本文记录了一次Vue项目的调试过程，包括项目环境的搭建（node.js v12.16.1，npm v6.13.4，vue-cli v4.2.3），遇到的webpack配置问题，如vue-loader的更新需求，以及通过npm run build的多次尝试最终成功打包。在解决过程中，了解到vue create和vue init webpack的区别，并意识到在上传项目到GitHub时不应包含node_modules。此外，还提到了Webstorm中的一些IDE问题，如require()的告警和JS库下载问题。

摘要由CSDN通过智能技术生成

todo小实战课程链接

项目环境

node.js：v12.16.1
npm：v6.13.4
vue-cli：v4.2.3

本次安装的依赖有：

  //package.json
  "dependencies": {
   
    "cross-env": "^7.0.2",				cross-env可以用单个命令设置mode，而不必担心兼容不同的OS
    "css-loader": "^3.4.2",
    "file-loader": "^5.1.0",			//url-loader依赖
    "html-webpack-plugin": "^3.2.0",	//用来在出口生成一个.html，才能访问网页
    "style-loader": "^1.1.3",
    "stylus": "^0.54.7",				//stylus-loader依赖
    "stylus-loader": "^3.0.2",
    "url-loader": "^3.0.0",
    "vue": "^2.6.11",
    "vue-loader": "^15.9.0",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.42.0",
    "webpack-dev-server": "^3.10.3"		//使用webpack-dev-server可以实现热部署（动态监听文件的改变，并hot replace）
  },
  "devDependencies": {
   
  //首先，它是dev的依赖，如果是用最新webpack原生构建，除了安装webpack外，还要安装webpck-cli，在webpack.config中配置mode选项
    "webpack-cli": "^3.3.11"
  }

试错过程

照着视频小心翼翼敲完，第一次运行npm run build

One CLI for webpack must be installed. These are recommended choices, delivered as separate pack
ages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): yes

要我安装webpack-cli，安装后接着报错：）

第二次运行npm run build

Hash: 01c93cf3e20f7c7e5f8f
Version: webpack 4.42.0
Time: 2907ms
Built at: 2020-03-15 0:13:18
 1 asset
Entrypoint main = bundle.js
[0] (webpack)/buildin/global.js 472 bytes {
   0} [built]
[1] ./src/app.vue?vue&type=template&id=5ef48958&scoped=true& 263 bytes {
   0} [built] [failed] [1 error]
[3] ./src/app.vue?vue&type=style&index=0&id=5ef48958&scoped=true&lang=css& 272 bytes {
   0} [built] [failed] [1 error]
[7] ./s