Vue前台服务器搭建（vue项目完整搭建步骤）

大家好，今天小编关注到一个比较有意思的话题，就是关于虚拟主机用vue搭建的问题，于是小编就整理了5个相关介绍虚拟主机用vue搭建的解答，让我们一起看看吧。

文章目录：

• 1、Vue前台服务器搭建
• 2、vue项目完整搭建步骤
• 3、阿里云虚拟主机 win2008 如何部署vue项目
• 4、Mac 系统配置Vue开发环境
• 5、vue2/vue3环境搭建

一、Vue前台服务器搭建

前言：Vue服务器采用nginx➕Vue为服务器；

请确保你是以拥有 sudo 权限的用户来登录的服务器

请按照下面的步骤，在 CentOS 中安装 Nginx。

类似于上面的内容，遇到这种情况，输入 y，然后 Enter（回车） 即可继续安装。

启动 Nginx：

sudo systemctl start nginx

通过运行以下命令，来检查 Nginx 的运行状态：

sudo systemctl status nginx

然后会输出类型下面的内容: 其中Active：active代表运行， failed代表暂停

通过下面的命令来打开这两个端口：

国内的服务器厂商，安全组也可能会默认屏蔽这两个端口，比如 阿里云 和 腾讯云，如果在 第 5 步 时发现无法访问，可以自行百度一下如何放开这两个端口。

你可以像管理其他服务那样管理 Nginx。

启动 Nginx

sudo systemctl start nginx

停止 Nginx

sudo systemctl stop nginx

重启 Nginx

sudo systemctl restart nginx

修改 Nginx 配置后，重新加载

sudo systemctl reload nginx

设置开机启动 Nginx

sudo systemctl enable nginx

关闭开机启动 Nginx

sudo systemctl disable nginx

本文引用： # 2019 年如何在 CentOS 7 上安装最新版 Nginx

注意：有可能会出现403 Forbidden，执行 setenforce 0 设置SELinux 成为permissive模式

二、vue项目完整搭建步骤

为了让一些不太清楚搭建前端项目的小白，更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架，那vue作为三大框架主流之一，在工作中很常用。所以就以vue为例。

下载并安装node

下载地址为：

在 nodejs官网下载最新版稳定版的node.js安装，自带了npm工具 ,推荐下载左边的。

检查node是否安装成功

为了更快安装，可以使用淘宝的镜像：

在终端输入以下命令：

检测cnpm是否安装成功

vue-cli是vue脚手架工具，方便打包，部署，测试等。

进入你的项目目录，创建一个基于 webpack 模板的新项目: vue init webpack 项目名

进入项目

安装依赖

此时项目中会多了一个node_modules

启动成功

三、阿里云虚拟主机 win2008 如何部署vue项目

虚拟主机环境是配置好的，不能安装软件程序。建议你还是用服务器吧。。

四、Mac 系统配置Vue开发环境

首先安装nodejs

终端输入：brew install nodejs  或者直接官网手动春源世安装。 node -v 查看 nodejs版扒肢本

注：网上说使用终端安装会需要nodejs模块安装目录的权限，运行：sudo chmod -R 777 /usr/local/lib/裂饥node_modules/

3、安装npm （淘宝镜像）

终端输入：npm install -g cnpm --registry=

4、安装webpack

cnpm install webpack -g

5、安装vue脚手架（自动搭建vue项目框架的工具）

sudo npm install -g vue-cli。静待。

输入vue或者vue list，可vue是否安装成功。

五、vue2/vue3环境搭建

检查是否安装成功

Vue build ==> 打包方式，回车即可；

　 Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

　 Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

　Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

　Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需慎搭要 所以 n 回车；

1、build：构建脚本目录

1）build.js ==> 生产环境构建脚本；

　　　　2）check-versions.js ==> 检查npm，node.js版本；

　　　　3）utils.js ==> 构建相关工具方法；

　　　　4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；

　　　　5）webpack.base.conf.js ==> webpack基本配置；

　　　　6）webpack.dev.conf.js ==> webpack开发环境配置；

　　　　7）webpack.prod.conf.js ==> webpack生产环境配置；

2、config：项目配置

1）dev.env.js ==> 开发环境变量；

2）index.js ==> 项目配置文件；

3）prod.env.js ==> 生产环境变量；

3、node_modules：npm 加载的项亏尺目依赖模块

4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

　　　　1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

　　　　2）components：组件目录，我们写的组件就放在这个目录里面；

　　　　3）router：前端路由，我们需要配置的路由路径写在index.js里面；

　　　　4）App.vue：根组件；

　　　　5）main.js：入口js文件；

　　5、static：静态资源目录，如图片、字体等。不会被webpack构建

　　6、index.html：首页入口文件，可以添加一些 meta 信息等

　　7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

　　8、README.md：项目的说明文档，markdown 格式

　　9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

1.解决vue不能自动打开浏览器的问题：宽空拿当我们输入npm run dev，运行项目，命令行提示我们运行成功，但是浏览器也没有自动打开，只能自己手动输入。

改完之后重启一下即可。

2.为了避免端口冲突，也可以修改port，打开目录同上

更改成功：

1. 如果你已经全局安装了旧版本的 vue-cli(1 或2)，你需要先通过

npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它(卸载脚手架)

2.全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli

3.全局安装了vue-cli3 但是还想用vue-cli2 ,添加一个桥接工具 命令：npm install -g @vue/cli-init

4.可以进行创建项目了

vue-cli2: 命令：vue init webpack my_project

vue-cli3 命令：vue create my-project

3.版本不同 安装方式也不同

vue-cli2: 命令 npm install -g vue-cli

vue-cli3: 命令 npm install -g @vue/cli

3.版本不同的创建项目方式不同

vue-cli2: 命令：vue init webpack my_project

vue-cli3 命令：vue create my-project

4.vue-cli2和vue-cli3 安装完后的 项目目录不一样

5.安装指定版本的vue

npm install -g @vue/ cli@3.12.1

vue-cli3.0项目目录结构

vue-cli2.0项目目录结构

vue-cli4.5.15 的vue2项目目录

到此，以上就是小编对于虚拟主机用vue搭建的问题就介绍到这了，希望介绍关于虚拟主机用vue搭建的5点解答对大家有用。