为使一些不太明白前端项目的小白，更快上手。在今天，我将带领您逐步建立起前端项目。前台开发需要使用框架，那vue作为主流的三种框架之一，在工作中被广泛使用。用vue作为例子。
设置节点。

在项目开发完成后，我们需要让项目上线运行以供用户访问，此时我们需要在服务器上部署项目。我们通常将Vue这类前端Web项目部署在linux系统上，这台常见的LinuxWeb应用服务器是Apache、Nginx和Tomcat。Nginx是一款高性能、低消耗、轻量级的反代理服务器，对于中小型项目来说，Nginx服务器可以部署Vue项目。

下载并安装节点

网址是https://nodejs.org/en/

请到nodejs网站下载node.js最新版稳定版，自带npm工具，推荐从左边下载。

确认节点已成功安装

节点V

设置淘宝镜像

要加快安装速度，请使用淘宝的镜像：http://npm.taobao.org/

输入终端的下列命令：

npminstall-gcnpm–registry.npm.taobao.org。

检查是否成功安装了cnpm。

将vue-cli安装全局

vue-cli是vue搭建工具，便于打包、部署、测试等等。

cnpminstall-globalvue-cli。 用支架来初始化vue项目。

请进入您的项目目录，创建一个基于webpack模板的新项目：vueinitwebpack项目名称。

vueinitwebpackmy_project。

设置依赖

项目的输入 cdmy_project。 cnpminstall。 在这个时候，项目中将有多个node_modules。

开始项目。 cnpmrundev。 起步成功

封装Vue项目

我们需要在项目发布前对项目进行打包，Vue脚手架就是利用webpack对前端代码进行编译、压缩、合并等操作，对其进行整合优化，并生成浏览器可以直接识别的文件(如html,css,fonts,img,js等)。可以参考文章VueT074的具体包装介绍，您是否真正了解项目打包？“快过来！”此处，我们直接使用命令：npmrunbuild将vue项目打包，打包后将在项目根目录生成一个dist文件夹，用于存放打包编译的文件。

Callbackwasalreadycalled错误

当对Vue-cli3.0打包时，js和css自动地打包，将所有的css样式打包为单个css文件。在打包时遇到错误：Callbackwasalreadycalled,vue.config.js文件中配置css:{extract:false}}。此配置指定css是否使用分离的插件ExtractTextPlugin(默认为true)，而将extract改为false则不会生成单独的css文件。

Nginx测试

首先，在Windows上，我们可以先在Nginx上进行测试，在Windows中使用Nginx可以参考文章“Nginx第001:Window中配置使用Nginx入门”。把打包的项目复制到nginx的html目录下，启动nginx，在浏览器地址栏中输入http://localhost:80访问权限项目。

部署Nginx服务

如果没有问题，我们可以先在服务器上安装nginx，然后再开始部署。Centos安装Nginx基本上和Ubuntu安装相同，在此不再重复，有需要可以参考文章“Linux实战008:Ubuntu搭建Nginx服务器的详细图解。将打包的文件上载到nginx的html目录(这个目录通常在/usr/share/nginx/html)，使用了finalshell之类的工具，将文件迅速上传到指定的服务器目录。

更改Nginx配置

docker的nginx基础概要文件通常保存在/etc/nginx文件夹下的nginx.conf文件中，缺省的配置default.conf也会放在这里。在default.conf中设置服务器配置，用户可以根据自己的项目需求配置nginx。在对vim进行修改后，执行命令：wq保存退出，然后执行命令：sudo./nginx-sreload重新启动下nginx(docker可以重新启动容器)。