冰凌汇编

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 40|回复: 0
收起左侧

[Vue.JS] Linux centerOS安装vue详细教程

[复制链接]
bingling 发表于 2022-9-20 18:28:59

PS:笔者为已刚毕业大学生,最近被许多站长开发的vue项目着实着迷,想着自己也学习一下,但是就安装这一块踩了许多坑,在此将安装过程分享出来,后续还会持续更新。

当然可以通过CDN使用VUE,你可以借助 script 标签直接通过 CDN 来使用 Vue:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

如果你不考虑使用CDN方式的话请你继续往下看:

安装Vue环境

首先,在安装Vue环境之前,我们首先需要安装npm这个玩意。

那么npm这个玩意是什么呢?官方的说法是:npm是基于Nodejs的资源包(package)管理器。

就好比你是一个顾客,想购买商品,而npm就是一个超市,里面有各种各样的商品,Vue就是其中的一个商品,你要想购买Vue这个商品就先要到npm这个商店去。因此我们首先来安装npm

安装node.js

npm是包含在nodejs里面的,考虑到项目后续的需要,我们不如直接安装nodejs更加省事,安装好了nodejs也就安装好了npm,因此我们首先访问nodejs的官网:https://nodejs.org/en/download/

Linux centerOS安装vue详细教程 - bingling_冰凌汇编

根据上图所示,如果你的主机是Linux X64哪直接选择Linux Binaries (x64)它就对了。

1.为了方便直接在终端安装,代码如下:

wgte https://nodejs.org/dist/v16.17.0/node-v16.17.0-linux-x64.tar.xz

Linux centerOS安装vue详细教程 - bingling_冰凌汇编

2.完成后,使用命令ls查看/root下存放的压缩包

Linux centerOS安装vue详细教程 - bingling_冰凌汇编

3.解压上图的压缩包,使用命令:

tar xvf node-v16.17.0-linux-x64.tar.xz

解压成功后,把node.js的整体目录移动到/usr/local的目录下统一管理,具体操作的命令如下:

mv node-v16.17.0-linux-x64 /usr/local/nodejs

一般情况下会自动创建软连,如果/usr/local/bin目录下没有node和npm文件的话需要手动创建软连,代码如下:

sudo ln -s /usr/local/nodejs/bin/node /usr/local/bin/node
sudo ln -s /usr/local/nodejs/bin/npm /usr/local/bin/npm

配置环境变量

node.js安装成功后,在/etc/profile下配置node.js的环境变量,具体如下:

#node.js的环境
export PATH=/usr/local/nodejs/bin:$PATH

添加文件后,再执行source立即生效

source /etc/profile

环境变量配置成功后,可以输入如下进行验证,具体如下:

[root@centos-master ~]# node -v
v16.17.0
[root@centos-master ~]# npm -v
8.15.0

如果终端提示有版本号则是安装成功了。

安装cnpm

NMP安装插件是从NPM官网下载对应的插件包,该网站的服务器在国外,经常会出现下载缓慢或出现异常,这时便需要找到另外的方法提供稳定的下载,这个方法就是CNPM。阿里巴巴的淘宝团队把NMP官网的插件都同步到了在中国的服务器,提供给我们从这个服务器上稳定下载资源。

CNMP同样是NMP的一个插件,通过cnpm来安装vue(切记一定要使用cnpm安装vue否则可能会失败),具体安装的命令如下:

npm install -g cnpm --registry=https://registry.npm.taobao.org

注意:安装完成后同样要建软链接,否则在使用cnpm时会报No command 'cnpm' found的错误。

执行cnpm软连代码如下:

sudo ln -s /usr/local/node/node_global/bin/cnpm /usr/local/bin/cnpm

接下来验证cnpm是否安装好,验证具体如下:
Linux centerOS安装vue详细教程 - bingling_冰凌汇编

有时使用cnpm初始化vue项目时会报错,所以还是使用npm,把源换下就行

npm config set registry https://registry.npm.taobao.org

至此,cnpm已经完成安装,继续🤞

安装Vue

接下来进行安装vue,具体安装过程如下:

cnpm install -g vue-cli

上述代码说明:参数: -g 表示全局安装。不加的话,就是当前目录安装。

完成后同样要建立软连,否则报错

sudo ln -s /usr/local/node/node_global/lib/node_modules/vue-cli/bin/vue /usr/local/bin/vue

验证vue环境

安装成功后,接下来可以验证vue的环境,输入如下命令来验证,具体如下:
Linux centerOS安装vue详细教程 - bingling_冰凌汇编

或者输入vue -V查看
Linux centerOS安装vue详细教程 - bingling_冰凌汇编

创建vue项目

在vue环境搭建好的基础上,开始创建一个vue的项目来进行测试,具体如下:

输入创建项目命令:

vue init webpack testproject1     #testproject1为项目名

等待完成
Linux centerOS安装vue详细教程 - bingling_冰凌汇编

接下来可以开始启动这个项目,具体安装如上的操作进行,具体操作过程如下:

cd /root/testproject1    #进入项目目录

启动项目:

npm run dev

Linux centerOS安装vue详细教程 - bingling_冰凌汇编

Linux centerOS安装vue详细教程 - bingling_冰凌汇编

如上图所示即代表成功完成本次教程的所有!!!撒花✨

如何在宝塔面板部署我们创建的项目供万维网访问

折腾了许久的前端项目终于要上线了 … ^_^

如果你的项目是使用vue开发的前端工程,开发之后,需要上线,要怎么操作呢??哪我们记录一下用宝塔面板部署vue项目上线的过程。

部署方式

将vue项目进行打包

运行以下命令:

npm run build

或者在webstorm的package.json运行build
Linux centerOS安装vue详细教程 - bingling_冰凌汇编

运行之后会在项目下生成dist文件夹

Linux centerOS安装vue详细教程 - bingling_冰凌汇编

生成的dist文件夹则是本项目最终的产物,可以将它部署到常见的web服务器中,如:
Ngxin,Apache,tomcat,IIS,Node.js等...

在宝塔面板进行部署网站

  • 登录宝塔面板,新建网站

Linux centerOS安装vue详细教程 - bingling_冰凌汇编

  • 输入域名,创建FTP,因为没有用到PHP,选择纯静态即可。

Linux centerOS安装vue详细教程 - bingling_冰凌汇编

  • 创建完成之后去FTP上传dist文件夹的内容到相应的路径

Linux centerOS安装vue详细教程 - bingling_冰凌汇编

验证网站

  • 在上传完网站文件之后,输入设定的域名就可以访问网站了。

踩坑记录

vue项目部署后刷新页面出现404错误

原因是由于vue项目使用history模式,只需要将之改成hash重新打包上传即可。

另一个解决方法是在服务端解决:

在宝塔面板网站菜单,找到部署的vue站点,打开设置,在配置文件设置中添加以下代码:

location / {
  try_files $uri $uri/ @router;
  index index.html;
}

location @router {
  rewrite ^.*$ /index.html last;
}

添加到如下位置:

Linux centerOS安装vue详细教程 - bingling_冰凌汇编

后话

当然如何部署到web方法应该有很多,大家可以自行研究,后续不断更新共同进步,因为刚刚接触到vue框架不是很懂这一块,有不足的地方望指点改正。Thanks♪(・ω・)ノ
本文采用原创方式发布,转载请注明出处。🏆

冰凌汇编免责声明
以上内容均来自网友转发或原创,如存在侵权请发送到站方邮件9003554@qq.com处理。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|站点统计|Archiver|小黑屋|RSS|冰凌汇编 ( 滇ICP备2022002049号 滇公网安备 53032102000029号)|网站地图

GMT+8, 2022-10-2 16:50 , Processed in 0.130089 second(s), 8 queries , Redis On.

冰凌汇编 - 建立于2021年12月20日

Powered by Discuz! © 2001-2022 Comsenz Inc.

快速回复 返回顶部 返回列表