构建vue项目常见错误集锦 ---LTS_a common cause of this error is the presence of a -优快云博客

本文链接：https://blog.youkuaiyun.com/bao_ge_ccq/article/details/103885238

本文汇总了在构建Vue项目中遇到的各种错误，包括mode报错、babel配置、html-webpack-plugin使用、cross-env问题、webpack-dev-server设置、CSS处理等，并提供了详细的错误信息和解决方案。同时介绍了Node.js的作用、npm的使用，以及如何创建和配置云端仓库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文是基于webpack 4.0以上的配置哟~~

mode报错

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

# 问题原因
由于webpack在打包的时候需要区分环境，所以需要一个模式来标识。这个表示一般系统在未配置的时候会发出警告并设置默认值为development。

# 解决方案
方案一：在package.json里面的scripts字段添加里面 --mode=development
"build": "webpack --mode=development"

方案二：在webpack.config.js里面添加一个mode字段
module.exports = {
	mode: 'development',
	entry: '***',
	output: {
		filename: '****'
	}
}

babel 报错

- Maybe you meant to use
"plugins": [
  ["@babel/plugin-transform-runtime", {
  "corejs": 3
}]
]

# 问题原因
错误将corejs:3归纳为plugins的子项目，其实应该是和@babel/plugin-transform-runtime同级

# Tips
使用babel的时候会用到一大堆依赖
@babel/core
@babel/plugin-transform-runtime
@babel/preset-env
@babel/runtime
@babel/runtime-corejs3

# babel完整配置
  module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        "presets": ["@babel/preset-env"],
                        "plugins": [
                            ["@babel/plugin-transform-runtime", {
                                "corejs": 3
                            }]
                        ]
                    }
                }
            }]
    }

# 推荐版本
在webpack.config.js里面写
 module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader"
                },
                 exclude: /node_modules/
            }]
    }
然后新建一个.babelrc目录负责维护babel的配置
{
    "presets": ["@babel/preset-env"],
        "plugins": [
            ["@babel/plugin-transform-runtime", {
                "corejs": 3
            }]
        ]
}

html-webpack-plugin 使用

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html', // 获取模板的位置
            filename: 'index.html' // 类似output里面的filename
        })
    ]
}

# 进阶config
`创建一个htmlConfig.js配置文件，然后再里面写入需要开启的变量`
mudule.exports = {
    dev: {
        template: {
            title: 'hello',
            header: false,
            footer: false
        }
    },
    build: {
        template: {
            title: '大家好',
            header: true
        }
    }
}
`在webpack.config.js里面引入htmlConfig.js`
const isDev = process.env.NODE_ENV === 'development';
const config = require('./htmlConfig.js')[isDev ? 'dev' : 'build'];
module.exports = {
     plugins: [
        new HtmlWebpackPlugin({
            template: './index.html', // 获取模板的位置
            filename: 'index.html',   // 类似output里面的filename
            config: config.template
        })
    ]
}
`在html模板里面书写语句`
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= (htmlWebpackPlugin.options.config.title) %></title>
</head>
<body>
    <% if(htmlWebpackPlugin.options.config.header){ %>
    <header>我是头部</header>
    <% } %>
    <div id="app"></div>
    <% if(htmlWebpackPlugin.options.config.footer){ %>
    <footer>我是footer</footer>
    <% } %>
</body>
</html>

cross-env报错

# 传递NODE_ENV
 - 可以通过set方式进行变量的设置 build: "set NODE_ENV=development" 在window下可以
 - 也可以通过cross-env方式 build: "cross-env NODE_ENV=development" 兼容linux和window
 
 # cross-env 不是内部或外部命令问题处理
 - 全局install cross-env

webpack-dev-server

# 原来在webpack.config.js里面的devServer是搭配webpack-dev-server来用的
一般在开发环境使用，所以，里面一般会有那种是否自动打开浏览器的设置(oepn)
设置端口号，是否代理，host等等

处理css

style-loader: 动态创建style标签，将css插入到head中
css-loader：负责处理@import等语句
postcss-loader和autoprefixer：自动生成浏览器兼容性前缀
less-loader：负责处理编译.less文件，将其转为css

# 在webpack.config.js中的完整配置
module.exports = {
    module: {
        rules: [
              {
                test: /\.less$/,
                use: [
                    'style-loader', 'css-loader', {
                        loader: 'postcss-loader',
                        options: {
                            plugins () {
                                return [
                                    require('autoprefixer')({
                                        "overrideBrowserslist": [
                                            ">0.05%",
                                            "not dead"
                                        ]
                                    })
                                ]

                            }
                        }
                    },
                    'less-loader'
                ]
            }
        ]
    }
}
其中use字段的loader执行顺序是从右往左的

# 将部分配置写到package.json里面去
  "browserslist": [
    ">0.25%",
    "not dead"]
然后只要在postcss-loader那个地方引入autoprefixer就行
use: [
    'style-loader', 'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            plugins: [require('autoprefixer')]
        }
    },
    'less-loader'
]

The engine “node” is incompatible with this module. Expected version “^8.12.0 || >=9.7.0”. Got “8.11.2”

# 执行CI/CD的时候，爆出了这个错误，原来是因为依赖里面有某个包的package.json里面的engines字段控制了node的版本。一般而言，根据最大容错法则，兼容最低版本的node。这里有两种解决方案
"engines": {
    "node": ">= 4.0.0"
}
- 在script里面的build程序通过yarn config set ignore-engines true
- 第二种方法就是每次打包前都重新获取一个新的node包，然后设置环境变量(新的包下面有教程)

# 升级环境前的node环境设置
CURRENT_PWD=`pwd`  // 保存当前的路径
mkdir -p lib  //创建临时文件夹，用于存放node安装包
cd lib
weget url  // 获取安装包的位置，前提要部署好
tar package //解压安装包
cd ..
NODE_DIR=packageName // 设置node的名字，一般是解压过后的名字
NEW="${CURRENT_PWD}/lib/${NODE_DIR}/bin/:${PATH}" // 设置环境变量
export PATH=${NEW}  // 暴露环境变量
chmod +x ./lib/${NODE_DIR}/bin/* // 给予权限
chmod +x ./lib/${NODE_DIR}/lib/node_modules/npm/bin/*  // 给予权限

webpack打包出现这样的错误

报错信息：A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

解决方案
valid：{ presets: [['presetName', {option: value}]] }
Invalid： { presets: [{option: value}] }
tips：webpack配置不熟悉的话可以上官网查看，然后一步一步来配置，谨记细心

报错信息：ERROR in ./src/style/index.less (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/less-loader/dist/cjs.js!./src/style/index.less)

解决方案

根据报错信息定位到postCss出了问题，首先考虑是不是根目录下面是不是没有postcss.config.js
然后再考虑配置文件webpack/vue.config.js的postCss配置项是否出了问题

报错信息： Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin
解决方案 rm -rf node_modules && yarn install && yarn run build
tips：由于在同一个项目使用了不同的包管理器，npm | yarn | cnpm | npx，导致包都乱窜了。

报错信息：mini-css-extract-plugin Conflicting order
解决方案：require.ensure([], component, 'chunk')出现了问题
tips：首先定位到是webpack不能有效提取出css。简单的说，就是在js里css的引入顺序导致的问题，多个css的在js里的引入顺序不同，就会提示这个警告。例如，在1.js 里，引入的顺序是a.css, b.css;在2.js里，引入顺序是b.css,a.css,出现了这种引入顺序不同，就导致了警告。在两个js里把引入顺序调成一致，就没问题了。在1.js和2.js里的引入顺序都调整成a.css, b.css就没有那个警告了。
如果是在路由里面出现这样的问题话，是由于require.ensure([], component, 'chunk');
里面的chunk出了问题，根chunk和子chunk产生了冲突,只要修改chunk名字或者保持一致即可


#### 解决favicon获取不到的问题
```javascript
搭建好了项目，也写好了代理，但是一直没有把favicon代理过去，后台一直报错误。
Proxy error: Could not proxy request /favicon.ico from **** tp ***
原来是因为如果要代理一些静态资源的话，后台服务器是无法识别的。为了
令后台服务器识别这些静态资源，就需要利用上copy-webpack-plugin这个插件。
在vue.config.js里面写进去这两句话,且将favicon.ico放到static下面
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
	configureWebpack: {
	    plugins: [new CopyWebpackPlugin([{ from: 'static', to: 'static' }])]
	},
	proxy: {
		pathRewrite: {
	      '^/static': '/dist/static' // 这个是关键
	    }
	}
};

// index.html
 <link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico"/>

启蒙篇

话不多说，直入话题

本文涉及Node.js 、 git、云仓库(这里的云仓库指的是码云)、win10

首先讲讲Node.js的作用

我不会说node.js是基于V8引擎的JavaScript运行环境，也不会告诉你node.js使用事件驱动、什么非阻塞I/O，什么轻量级，高并发等等优点，我只会告诉你node里面有一个东西叫做【npm】的包管理工具。
首先，你得会安装Node.js
目前最新版本 10.10.0
稳定版本 8.12.0
你安装完毕后在CMD里面输入node -v指令，如果弹出像下图那样类型的字符，恭喜你，node安装成功
在这里插入图片描述
然后再输入npm -v指令检查npm -v是否有npm的这东东，如果显示如下图即可

Node.js 与 npm的关系

包含关系，nodejs中含有npm，比如说你安装好nodejs，你打开cmd输入npm -v会发现出现npm的版本号，说明npm已经安装好。

其实npm是nodejs的包管理器（package manager）。我们在Node.js上开发时，会用到很多别人已经写好的javascript代码，如果每当我们需要别人的代码时，都根据名字搜索一下，下载源码，解压，再使用，会非常麻烦。于是就出现了包管理器npm。大家把自己写好的源码上传到npm官网上，如果要用某个或某些个，直接通过npm安装就可以了，不用管那个源码在哪里。并且如果我们要使用模块A，而模块A又依赖模块B，模块B又依赖模块C和D，此时npm会根据依赖关系，把所有依赖的包都下载下来并且管理起来。试想如果这些工作全靠我们自己去完成会多么麻烦！

创建一个云端仓库

第二部就是去网上创建一个仓库，用于存放你的项目，作者是用马云，噢打错，是码云

创建账号这种操作就不用多说了，当你创建好了一个账号，你点击下面的①项目，②然后选择Private，第三点击这个加号

在这里插入图片描述
点击成功然后就开始创建一个私人的云仓库，具体如下图

创建成功后一般有两个文件，

其中
License 阐述项目采用何种开源协议
Readme.md是用于本地Git启动项目的基本配置
把密钥先复制好，接下来会用到

配置云端仓库的钥匙

仓库已经创建好了，不过是在云端，现在我们需要把它拿到本地上来，这里就涉及SSH公钥的设置，主要的作用是用在云端和本地上传工具的识别
在这里插入图片描述
点击右上角的管理，找到左侧的部署公钥管理，选择添加公钥

问题来了，公钥怎么生成？

因为本地连接到云端的仓库是依赖git的，所以，公钥的生成就要用到git界面
回到桌面，右键鼠标，打开Git Bash Here

在这里插入图片描述

输入指令 ssh-keygen -t rsa -C "xxxxx@xxxxx.com"
例如：ssh-keygen -t rsa -C "123456@163.com", 然后连续按三次回车
再输入cat ~/.ssh/id_rsa.pub 即可查看生成的 publick key
把public key 的内容复制，粘贴到公钥框里面，点击生成即可

打开Git Bash Here 输入指令 git clone + ssh密钥
然后就可以把云仓库里面的文件down下来了，接下来继续在Git Bash Here 里面输入
npm install --global vue-cli //安装vue-cli
切换目录，接下来要初始化文件，默认会把所有初始化文件存放在
当前文件夹里面 ,然后输入以下命令，记住，my-project表示的是你要存放的文件的名称

vue init webpack my-project

然后按照提示选择

    Target directory exists. Continue? (Y/n) y   --项目文件夹已经存在
    Project name (Alibaba/) Alibaba  --项目名称
    Project description (A Vue.js project) –项目描述 这里直接回车
    Author hikebao  --作者
    Vue build (Use arrow keys)   Runtime + Compiler: recommended for most users –回车选择默认
    Install vue-router? (Y/n) Y  --构建vue路由
    Use ESLint to lint your code? (Y/n) n  --使用语法检测
    Set up unit tests (Y/n) n  --设置单元测试
    Setup e2e tests with Nightwatch? (Y/n) n –设置端到端测试
    Should we run `npm install` for you after the project has been created?    (recommended) (Use arrow keys) Yes, use NPM –-使用npm的包管理工具

在这里插入图片描述

进入当前项目的文件夹
Cd + 文件夹路径 ex: cd Alibaba
然后输入
npm run start 启动项目

在这里插入图片描述

到此已经把vue的项目搭建好了
最后一步就是把项目里面的内容上传到码云
按下Ctrl + c 暂停服务器
然后依次输入
Git add . --把当前本地的文件缓冲到内存
Git commit --m ‘这里是更新描述‘
Git push --把项目上传到码云

下面是一些常用的git命令
删除云端数据，本地不受影响
Git rm –-cached --需要删除的文件名 ex : git rm –-cached build
Git commit –m ‘操作描述’ --ex:git commit -m ‘Delete build file’
Git push --把修改更新到服务端

.
.
.
.
.