Webpack 是前端开发中常用的构建工具之一，能够将多个模块打包成一个或多个 bundle，是 Vue 项目打包的首选构建工具。而 Nginx 则是一款高性能的 HTTP 服务器，可以应对高并发的网络请求，是部署静态资源的理想选择。本文将为大家介绍在 Vue 项目中使用 Webpack 打包，并通过 Nginx 部署静态资源的完整流程。
环境搭建
在开始前，请确保已经具备以下环境：
- Node.js 环境
- Vue.js 环境
- Webpack 环境
为了使用 Nginx 进行部署，还需要先安装 Nginx，可根据系统选择安装方式，例如在 Ubuntu 系统中，使用以下命令可以安装 Nginx：
sudo apt-get install nginx
Webpack 打包
安装 webpack
使用 webpack 来打包 Vue.js 应用，需要先安装 webpack，可以使用 npm 来进行安装：
npm install webpack webpack-cli --save-dev
配置 webpack
创建一个 webpack.config.js 文件，用来配置 webpack 的打包信息。如下所示：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ ----------------
------- -
----- ----------------------- --------
--------- ------------
--
------- -
------ -
-
----- ---------
---- ---------------
--
-
----- --------
---- -----------------
--
-
----- ----------------------
---- -
-
------- --------------
-------- -
----- ---------------
----------- ----------------
--
--
--
--
--
--
-------- ---
-------- -
------ -
----- ------------------------------
--
----------- ----- ------ ------- ---------
--
--在此配置文件中，我们指定入口文件为 ./src/main.js，打包后输出到 dist 目录下的 bundle.js 文件，同时，我们使用 vue-loader 和 babel-loader 来处理 .vue 和 .js 文件，以及使用 file-loader 处理图片等静态资源。
执行打包
配置完使用 webpack 的打包信息后，可以使用以下命令执行打包：
npx webpack --config ./webpack.config.js
执行成功后，会在 dist 目录下生成打包文件 bundle.js。
Nginx 部署
配置 Nginx
完成 webpack 打包后，就需要将生成的静态资源部署到 Nginx 服务器上。Nginx 可以通过一个简单的配置文件来定义它应该如何响应 HTTP 请求。在 /etc/nginx/sites-available/ 下创建一个新文件，在文件中添加以下内容：
-- -------------------- ---- -------
------ -
------ ---
----------- ------------
-------- - -
---- -----------------------
----- -----------
--------- ---- ----- ------------
------- ---
-
-以上配置文件中，listen 指定 Nginx 监听的端口号，server_name 指定服务器的域名。location 指定发布的位置，/ 指网站的根路径，root 指定发布的目录，如上例中的 /var/www/vue-app/dist/，index 表示默认访问的文件名，try_files 是如果没有找到请求的文件，返回 index.html 等文件，以支持单页应用的路由地址。
重启 Nginx
然后将管理员权限转换到超级用户，并启动 Nginx 服务：
sudo service nginx start
或者重启 Nginx：
sudo service nginx restart
此时，打开浏览器，输入服务器的 IP 地址或绑定的域名，即可访问发布的 Vue 应用。
总结
本文通过详细的过程介绍了在 Vue.js 应用中使用 Webpack 构建，并使用 Nginx 进行静态资源部署的完整流程，涉及了 webpack 和 Nginx 的实际配置和部署方法。希望能对大家在使用 Vue.js 的过程中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645cc989968c7c53b0f444da