从零开始搭建vue项目（晋级篇） npm run dev npm run build

最新推荐文章于 2025-03-12 08:52:14 发布

置顶青柠知秋

最新推荐文章于 2025-03-12 08:52:14 发布

阅读量1.8w

点赞数 11

分类专栏： vue 项目文章标签：搭建项目 vue项目 vue npm run dev npm run build

本文链接：https://blog.csdn.net/zbl744949461/article/details/110039452

版权

vue 同时被 2 个专栏收录

10 篇文章

订阅专栏

项目

2 篇文章

订阅专栏

2.2 调用入口文件 webpack.dev.conf.js

2.3 build/utils.js

2.4 config/index.js

2.5 build/webpack.base.conf.js

2.6 引入文件顺序

3. 打包项目 npm run build

一. 前言

1. 目标

以前做过多个vue的项目，每个项目都有其自己的优势，想整合下之前开发过的所有vue项目中精华的部分，也是对自己的一个总结吧。

2. 搭建思路

以vue-cli为底，在其基础上搭建项目，分几大块搭建。

3. 环境准备

像node，npm之类的下载安装，请看 https://blog.csdn.net/zbl744949461/article/details/84784268，这是多版本的node，不需要的话，直接安装一个版本就行。

使用的是vue2.x搭建，怎么下载搭建个基础的架子，网上有很多前辈文章可以参考，也可看 https://blog.csdn.net/zbl744949461/article/details/90516886 的二.搭建项目。

先用脚手架新建个项目，如下。

为了防止开发时思路错了，又找不到以前的历史记录的尴尬，在本地用svn服务器做版本管理，方便对比，关于怎么使用svn服务器，请参考 https://blog.csdn.net/zbl744949461/article/details/90516886 的二.搭建项目→ 3版本控制。（也可用git做版本控制，或其他方式都OK，看哪个方便）

以上准备工作做完，安装包，npm install。（打包发布到服务器时，是不上传已安装完的包的，这样文件比较下，方便其他人下载，如果把包都上传了，别人下载就会很大，下的慢。包可以把项目下载到本地后自己安装）

有网络不好或者其他问题的猿友，用npm安装很慢，即使换了淘宝镜像也不行，可以用yarn安装，npm是一个包安装完再安装下一个，yarn是所有包同时进行，所以很快。使用yarn：https://blog.csdn.net/zbl744949461/article/details/110792471

npm安装5个小时，yarn安装300秒。

二. 基础知识

在搭项目架构之前，要先说下现在这个vue-cli的运作方式，明白怎样掌控这个项目。

关于vue的目录，可以看前辈的文章，很详细https://www.cnblogs.com/zhangruiqi/p/9062005.html

最先要了解的是package.json这个文件。

package.json里默认定义了项目名称、项目版本号、项目介绍、项目作者、执行命令、生产环境要安装的包、开发环境要安装的包、引擎版本、浏览器的限制要求。

package.json文件中的字段script的每一个属性都是一个自定义的脚本命令，需要通过npm来执行。

npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从npm服务器下载别人编写的第三方包到本地使用。
允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用。

还有常用的卸载模块、更新模块、搜索模块、创建模块等。

npm run 命令：npm run命令都是定义在package.json文件的scripts节点里面的，

npm run dev就是执行package.json中的scripts中的dev中的脚本，

npm run start 就是执行package.json中的scripts中的start中的脚本，也可简写 npm start

（有4个可简写的命令npm start、npm stop、npm test、npm restart）。

（npm 命令：https://www.npmjs.cn/cli/run-script/）

在这里，需要掌握4件事，包配置安装npm install，运行项目npm run dev，打包项目npm run build，项目代码检查 npm run lint

1. 包配置安装 npm install

关于包配置，开发环境的包只有在开发环境用，生产环境的包在开发和生产都要用。

比如我们在开发时用的是es6语言，开发环境有一个包，作用是在打包时把es6的语言转成es5的语言，

那么打包后，在生产环境的代码是已经转成es5的代码，就不需要再转码了，所有也就不需要这个包了。

如果是像echart（做图形的）的包，就是开发和生产环境都需要，所以要放在生产环境的包配置里。

一般安装生产环境里要用的包，用命令 npm i xxx(包名) -S 或 npm install xxx(包名) --save ；往开发环境安装包 npm i xxx(包名) -D 或 npm install xxx(包名) --save-dev。

一个关于安装包的小技巧，如果已经用 npm install 安装完包了，还想安装其他的包，

如果已经知道想安装的包的版本，可以直接在package.json的 "dependencies" 或 "devDependencies"中配置好，直接运行npm install就行，

相当于npm检查了package.json中有哪些没被安装的包，又安装了下，npm install不会把所有包重新安装一遍。

2. 运行项目 npm run dev

2.1 执行npm run dev

npm run 是执行脚本的命令。

npm run dev 就是执行package.json 里的scripts的dev属性的脚本

webpack-dev-server是开发服务器，npm run dev 就是启动这个服务器，后面都是配置这个服务器的启动参数。

--inline ：webpack-dev-serve有2种刷新模式 inline模式和iframe模式。

官方文档：https://webpack.docschina.org/configuration/dev-server/#devserverinline

2种模式的介绍： https://segmentfault.com/a/1190000014141798

inline模式 是在 bundle 中插入脚本以进行实时重新加载，并且构建消息将出现在浏览器控制台中，

iframe模式是在网页中嵌入了一个iframe，将我们自己的应用注入到这个iframe当中去，在通知栏下使用带有有关构建消息的<iframe>

使用Iframe mode和Inline mode达到的效果都是一样的，都是监听文件的变化，然后再将编译后的文件推送到前端，完成页面的reload的，就是实时刷新，当使用HMR（热替换）功能时，推荐使用inline mode。

在 CLI 中没有方法禁用inline

--progress：将运行进度输出到控制台。是否显示在编译时候的进度条，一般都会有，看着编译的进度，体验好一些。

--config：服务器的配置文件，是build目录下的webpack.dev.conf.js文件

--host：有一些情况，我们会改变服务器的默认localhost改为一个具体的ip，就是在dev这里写参数 --host 192.168.0.121 (写在js后)

如果将默认的localhost改成本机的ip地址，可能不能访问。将config文件夹下的index.js中，host地址改成 '0.0.0.0'

webpack-dev-server还有其他的属性，请看官方文档。

2.2 调用入口文件 webpack.dev.conf.js

文件代码

① 代码使用严格模式 use strict

② 定义常量 utils，引入文件 build/utils.js

文件里主要定义一些工具函数。

③ 定义常量 webpack，引入webpack

打包工具

④ 定义常量 config 引入文件 config/index.js

这个文件里是项目的配置。

⑤ 定义常量 merge，引入插件 webpack-merge

merge是什么，它有什么用处？

随着我们业务逻辑的增多，图片、字体、css、ES6以及CSS预处理器和后处理器逐渐的加入到我们的项目中来，

进而导致配置文件的增多，使得配置文件书写起来比较繁琐，更严重者（书写特定文件的位置会出现错误）。

更由于项目中不同的生产环境和开发环境的配置，使得配置文件变得更加糟糕。

使用单个的配置文件会影响到任务的可重用性，随着项目需求的增长，我们必须要找到更有效地管理配置文件的方法。

管理配置文件的几种方法:
在每个环境的多个文件中维护配置，并通过--config参数将webpack指向每个文件，通过模块导入共享配置。
将配置文件推送到库，然后引用库。
将配置文件推送到工具。
维护单个配置文件的所有配置并在那里进行分支并依赖--env参数。

简单来说，配置的参数被分到各个文件中，如果配置文件被分成了许多不同的部分，那么必须以某种方式来组合他们，通常就是合并数组和对象，webpack-merge很好的做到了这一点。

webpack-merge做了两件事：它允许连接数组并合并对象，而不是覆盖组合。

https://www.cnblogs.com/cczlovexw/p/11765571.html

⑥ 定义常量 path，引入nodejs路径模块

path是node的path，path 模块提供了一些工具函数，用于处理文件与目录的路径。

https://www.nodeapp.cn/path.html

⑦ 定义常量 baseWebpackConfig，引入文件 build/webpack.base.conf.js

这里引入了一个公共的配置：const baseWebpackConfig = require('./webpack.base.conf')

为什么会单独抽离一个公共配置：主要是因为在打生产包和平时调试的一些相同的配置能够一起使用，然后有差异的地方，通过对象合并的方式，后面的覆盖前面的，然后达到每个环境私有化配置的目的。

⑧ 定义常量 CopyWebpackPlugin，引入插件 copy-webpack-plugin

这个插件的作用是在webpack中拷贝，将单个文件或整个目录复制到构建目录，拷贝文件和文件夹。

比如打包项目时，js文件和css文件会被合并，图片不用合并，直接复制到打包的项目目录下就好了。这个包就是起这个复制作用。

参数：

from 定义要拷贝的源文件 from：__dirname+'/src/components'
to 定义要拷贝到的目标文件夹 to: __dirname+'/dist'
toType file 或者 dir 可选，默认是文件
force 强制覆盖前面的插件可选，默认是文件
context 可选，默认base context可用specific context
flatten 只拷贝指定的文件可以用模糊匹配
ignore 忽略拷贝指定的文件可以模糊匹配

用法：

const CopyWebpackPlugin=require('copy-webpack-plugin');
new CopyWebpackPlugin([
{
from: __dirname+'/src/components',
to: __dirname+'/dist',
ignore: ['.*']
}
])

⑨ 定义常量 HtmlWebpackPlugin，引入插件 html-webpack-plugin

html-webpack-plugin 插件是用于编译 Webpack 项目中的 html 类型的文件，简单来说，就是一个用于生成HTML文件并自动注入依赖文件（link/script）的webpack插件。

如果直接将 html 文件置于 ./src 目录中，用 Webpack 打包时是不会编译到生产环境中的。

因为 Webpack 编译任何文件都需要基于配置文件先行配置的

简单来说html-webpack-plugin就是生成一个html文件，可以是无配置的，无配置的情况它可以自动生成一个html，如下

这时候html-webpack-plugin的配置项就会起作用，最经常使用的就是 template:'你的html的路径'。

参数：

title: 用来生成页面的 title 元素
filename: 输出的 HTML 文件名，默认是 index.html, 也可以直接配置带有子目录。
template: 模板文件路径，支持加载器，比如 html!./index.html
inject: true | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。
minify: {} | false , 传递 html-minifier 选项给 minify 输出
hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用。
cache: true | false，如果为 true, 这是默认值，仅仅在文件修改之后才会发布文件。
showErrors: true | false, 如果为 true, 这是默认值，错误信息会写入到 HTML 页面中
chunks: 允许只添加某些块 (比如，仅仅 unit test 块)
chunksSortMode: 允许控制块在添加到页面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块)

⑩ 定义常量 FriendlyErrorsPlugin，引入插件 friendly-errors-webpack-plugin

友好的错误提示插件，Friendly-errors-webpack-plugin识别某些类别的webpack错误，并清理，聚合和优先级，以提供更好的开发人员体验。

从webpack错误中提取相关信息。这是通过这里的插件完成的
将变换器应用于所有错误，以识别和注释众所周知的错误并为其提供优先级
如果没有抛出错误，则仅获取最高优先级错误或最高优先级警告
将格式化程序应用于所有带注释的错误

⑪ 定义常量 portfinder，引入portfinder

portfinder帮你自动获取可用端口，当设置的端口被占用，自动寻找下一个。（循环，当前端口+1，直到找到可用为止）

参数：

port: 3000, // minimum port

stopPort: 3333 // maximum port

⑫ 定义常量 HOST

const HOST = process.env.HOST

process 对象是一个 global （全局变量），提供有关信息，控制当前 Node.js 进程。作为一个对象，它对于 Node.js 应用程序始终是可用的，故无需使用 require()。

process是node的当前进程对象，process.env属性会返回包含用户环境的对象

就是这个 env属性，在 development和production不同环境上，配置会有些不同。

process.env.HOST就是当前环境的HOST

在新建的项目，还没配置HOST，控制台打印，显示undefined（启动项目时，webstorm的程序控制台中，不是网页console里打印）

有兴趣可以打印下process.env试试

⑬ 定义常量 PORT

当前环境的端口

⑭ 定义常量 devWebpackConfig

这个常量的目的是，将webpack的基础配置（webpack.base.conf.js中导出的对象）和一些其他配置合并。

⑮ 导出

导出一个异步操作的最终完成 (或失败)及webpack的配置。

这个文件最终目的是返回一个webpack的配置。

2.3 build/utils.js

这个文件里主要定义一些工具函数。

文件代码

① 代码使用严格模式 use strict

② 定义常量 path，引入nodejs路径模块

path是node的path，path 模块提供了一些工具函数，用于处理文件与目录的路径。

https://www.nodeapp.cn/path.html

③ 定义常量 config 引入文件 config/index.js

这个文件里是项目的配置。

④ 定义常量 ExtractTextPlugin，引入插件 extract-text-webpack-plugin

webpack的打包机制：webpack本来只能打包处理.js文件，但是通过强大的loader之后，可以打包处理各种类型的文件。比如：.css文件

但css的内容都被打包到bundle.js里面，为了将css模块和js模块分开打包，使用这个插件。

https://blog.csdn.net/weixin_41134409/article/details/88416356

⑤ 定义常量 packageConfig 引入文件 package.json

⑥ 导出函数 assetsPath

函数目的：执行函数，返回当前环境下的静态资源目录与自己目录的合并目录。

执行过程：

判断当前环境是不是生产，如果是，用build的静态资源存放路径，不是，就用dev的静态资源存放路径。（在config/index.js中）

path.posix是path的一个方法，用于处理posix样式的目录（posix的目录用的是/，相对的win32目录中用的是\）

https://blog.csdn.net/u014711690/article/details/111639640

http://nodejs.cn/api/path.html#path_path_posix

assetsSubDirectory是除了 index.html 之外的静态资源要存放的路径（在config/index.js中）

⑦ 导出函数 cssLoaders

函数目的：设置css加载器属性，不同css语言的用不同的加载器解析使用。

⑧ 导出函数 styleLoaders

函数目的：为独立样式文件生成加载程序（除.vue之外）

⑨ 导出函数 createNotifierCallback

函数目的：创建通知程序回调，返回提示。

执行过程：引入node的notifier模块，用于处理所有应用程序级别的通知（苹果推送通知，邮件和Facebook帖子）

没报错，返回空，报错，返回具体格式的错误提示。

2.4 config/index.js

这个文件里是项目的一些配置。

dev（本地测试环境）和build（生产环境）的一些配置。

① 测试环境配置

assetsSubDirectory：除了 index.html 之外的静态资源要存放的路径，简称静态资源文件夹

assetsPublicPath：代表打包后，index.html里面引用资源的的相对地址

proxyTable：定义开发服务器的代理规则。需要 proxyTable 代理的接口（可跨域）

host：主机地址

post：运行测试页面的端口

autoOpenBrowser：运行后项目是否自启，设置true就会自动打开浏览器，运行项目。

errorOverlay：查询错误

notifyOnErrors：通知错误

poll：与devserver相关的一个配置，webpack提供的devserver是可以监控文件改动的，但在有些情况下却不能工作，我们可以设置一个轮询（poll）来解决

useEslint：是否使用eslint，在用vue-cli搭建项目的时候，有询问

showEslintErrorsInOverlay：是否展示eslint的错误提示

devtool：webpack提供的用来方便调试的配置，它有四种模式：

1 source-map ：产生一个单独的source-map文件，功能最完全，但会减慢打包速度

2 eval-source-map ：使用eval打包源文件模块，直接在源文件中写入干净完整的source-map，不影响构建速度，但影响执行速度和安全，建议开发环境中使用，生产阶段不要使用

3 cheap-module-source-map：会产生一个不带映射到列的单独的map文件，开发者工具就只能看到行，但无法对应到具体的列（符号），对调试不便

4 cheap-module-eval-source-map：不会产生单独的map文件，（与eval-source-map类似）但开发者工具就只能看到行，但无法对应到具体的列（符号），对调试不便

默认设置的第四种 https://zhuanlan.zhihu.com/p/265266279

cacheBusting：一个配合devtool的配置，当给文件名插入新的hash导致清楚缓存时是否生成souce maps，默认在开发环境下为true

cssSourceMap：是否开启cssSourceMap

② 生产环境配置

index：编译后index.html的路径，path.resolve(__dirname, '../dist')中

path.resolve(__dirname）指的是index.js所在的绝对路径，再去找“../dist”这个路径（node相关的知识），

必须是本地文件系统上的绝对路径。

assetsRoot：打包后的文件根路径，至于assetsSubDirectory和assetsPublicPath跟dev中的一样，必须是本地文件系统上的绝对路径。

assetsSubDirectory：打包前静态资源存放目录？

assetsPublicPath: 代表打包后，index.html里面引用资源的的相对地址

这个是通过http服务器运行的url路径。在大多数情况下，这个是根目录(/)。如果你的后台框架对静态资源url前缀要求，你仅需要改变这个参数。

在内部，这个是被webpack当做output.publicPath来处理的。

后台有要求的话一般要加上./ 或者根据具体目录添加，不然引用不到静态资源

productionSourceMap：是否开启source-map，

devtool：同dev，

productionGzip：是否压缩，

productionGzipExtensions：gzip模式下需要压缩的文件的扩展名，设置后会对相应扩展名的文件进行压缩

bundleAnalyzerReport：是否开启打包后的分析报告

前辈使用地址经验，如图：

2.5 build/webpack.base.conf.js

文件代码：

① 严格模式

② 引入nodejs路径模块

③ 引入文件 build/utils.js

里面有一些工具函数

④ 引入文件 config/index.js

这个文件里是项目的配置。

⑤ 引入文件 build/vue-loader.conf.js

vue-loader.conf配置文件是用来解决各种css文件的，定义了诸如css,less,sass之类的和样式有关的loader

判断是不是生产环境，根据环境来获取相应的productionSourceMap或者cssSourceMap
导出
module.exports = {
loaders:utils.cssLoaders({
sourceMap:sourceMapEnabled,    //是否开始sourceMap 用来调试
extract:isProduction   //是否单独提取抽离css ，是否将单独的css文件（一般为引入的外部文件）进行提取单独打包
}),
cssSourceMap:sourceMapEnabled,  //记录压缩的代码，用来找到源码位置
cacheBusting:config.dev.cacheBusting, //是否缓存破坏
    transformToRequire:{ //作用是在模块编译的过程中，编译器可以将某些属性，比如src转换为require调用
   video:['src','poster'],
source:'src',
img:'src',
image:'xlink:href'
}
}

⑥ resolve函数用来获取路径的

__dirname是当前文件（webpack.base.conf.js）的路径，用join拼接'..'得到项目路径，再去拼接所需路径，返回的就是所需目录完整的路径。

⑦ 定义常量createLintingRule

这常量是在vue开启了语法检查时会用的，没开就不会用到。

test: /\.(js|vue)$/
loader: 'eslint-loader', //对.js和.vue文件在编译之前进行检测，检查有没有语法错误
enforce: 'pre',  // 让eslint插件能够在编译之前检测，如果不添加此项，就要把这个配置项放到末尾，确保第一个执行
include: [resolve('src'), resolve('test')], // 指明这些目录下的文件要被eslint-loader检测，还有一个exclude表示排除某些文件夹
   options: { // options表示传递给eslint-loader的参数
formatter: require('eslint-friendly-formatter')  // eslint-friendly-formatter是eslint的一个报告总结插件，eslint的检测报告非常难看懂，这个插件就是整理这些报告方便查阅的
emitWarning: !config.dev.showEslintErrorsInOverlay

}

⑧ 导出webpack的基本配置

context：项目路径

entry：入口文件配置

入口文件是src目录下的main.js

output：出口文件配置

path： config目录下的index.js中的build配置中的assetsRoot，默认是dist目录（没改的话），可以被后续的文件配置合并覆盖掉

filename：文件名称这里使用默认的name也就是main

publicPath：上线地址，也就是真正的文件引用路径，如果是production生产环境，这里是 '/'

resolve：

extensions：是用来对模块的后缀进行解析，省略扩展名。

例：引入模块 require('../config') ，webpack.base里引入了config模块的时候，没有带js后缀，文件本质上是不会识别的，

有了这个配置，会先进行.js后缀匹配，没匹配成功，再匹配.vue，没有再匹配 .json，最后都没有找到就会报错，文件没有找到no find。

alias：配置别名，起到简化路径的作用

vue$： $符号指精确匹配，相当于 import vuejs from "vue"就是导入vue.esm.js文件

@：当你需要在一个很深的文件引入其他文件中又一个很深的文件，要写很长的相对路径，

别名可以设定一个入口位置，比如用@来代替src目录的绝对路径，如果开发的所有文件都放在src目录下，就可以通过src目录直接定位到你想要找的文件。

这样再引入文件时，就可以写成 import HelloWorld from '@/components/HelloWorld'

module：解析不同模块的配置

是否设置了代码检查，设置了就加入代码检查规则。

属性说明：

test：是用来解析所有test中设置的.xxx后缀的文件，这里分别对.vue、.js、图片、音视频、字体文件进行解析

loader：用什么npm什么形式的loader去解析这些文件

在解析js文件时，用的是babel-loader解析器，进行es6转换成es5的，但不是所有js文件都解析，在node_modules中很多都转好了，直接用，而且

include：代表解析的文件中包含那些东西，比如需要解析的文件的目录。

options：是对解析文件参数配置
vueLoaderConfig 是对vue文件的style样式进行解析，解析编译，再进行ExtractTextPlugin来进行合并
limit：10000：将低于limit设置的图片（或音频，或字体文件等）进行base64编码，以减少http请求，就是让8kb之内的图片编码，大于8kb的图片如果编码会太长，所以用http请求加载。
（将图片文件转换为base64编码并载入浏览器能够减少http请求数，但是增大了js或html文件的体积，如果图片在项目中的重用度较高，那么每处引用都会生成base64编码，造成了代码的冗余。通过http请求载入到浏览器的文件可以缓存到本地，当图片在项目中的重用度较高时，会为图片的访问增加缓存的便利性，下次访问更快。因此要平衡考虑）
name : 对输出的内容地行地址转换，一个图在dev开发的时候用../../xx/xx.jpg，到生产环境地址要重新生成唯一的地址，为了清缓存时用，此时就要用到地址转换。
'img/[name].[hash:7].[ext]'：就是生成img目录下，原文件名+7位的hash值+文件原来的后缀

node：以下选项是Node.js全局变量或模块，这里主要是防止webpack注入一些Node.js的东西到vue中