当前位置 : 首页/建站知识/深圳网站建设公司/如何部署搭建vue项目(所有步骤)

如何部署搭建vue项目(所有步骤)

发布时间:2021年9月2日 18:00 作者:誉新源

为使一些不太明白前端项目的小白,更快上手。在今天,我将带领您逐步建立起前端项目。前台开发需要使用框架,那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可以重新启动容器)。