在宝塔环境下安装VUE 及webpack

1、搭建环境--由于本人安装的是宝塔主机，因此如下：

由于我直接使用的是宝塔主机,直接去“软件管理”安装 PM2管理器。
安装好以后点击“设置”，找到“模块管理”，直接安装需要的模板，我使用的是nuxt，因此我也直接安装了 nuxt。 (这里安装有没有用我目前不太清楚，我只是知道我项目里使用了nuxt，所有我就顺便安装了，时间太忙也就没深入研究了)

2、添加站点

站点添加成功后修改站点配置文件，直接在配置文件顶部增加
upstream nodenuxt {server 127.0.0.1:3003; #nuxt项目 监听端口keepalive 64;
}
//以下为之前默认的数据，不用管
server {listen 80;server_name mysite.com;location / {proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;  proxy_set_header Connection "upgrade";proxy_set_header Host $host;proxy_set_header X-Nginx-Proxy true;proxy_cache_bypass $http_upgrade;proxy_pass http://nodenuxt; #反向代理}
}

3、设置反向代理

由于以上配置了 127.0.0.1:3003
因此反向代理的目标URL也为 http://127.0.0.1:3003
发送域名：mysite.com  //项目的访问域名

4、本地项目下的package.json里设置, 注意：start 使用了3003端

"scripts": {"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server","online": "cross-env NODE_ENV=production nuxt start","build": "nuxt build","start": "PORT=3003 nuxt start","generate": "nuxt generate","lint": "eslint --ext .js,.vue --ignore-path .gitignore .","precommit": "npm run lint"},

5、项目本地完成后， npm run build 打包应用

打包完成后将以下四个文件上传到服务器空间
.nuxt     //打包生成的文件夹
static    //默认静态文件
nuxt.config.js   //nuxt项目配置文件
package.json   //配置文件

6、在服务器上部署运行

1. 使用命令模式：终端或者其他方式链接上服务器
2. 自己先测试一下服务器上是否安装支node npm,检查一下版本号 node -vnpm -v
2. 进入到该项目的根目录
3. 运行 npm install 安装package里的依赖
4. 安装好3以后，再运行 npm start 就可以运行起来nuxt的服务渲染了如下：
> my-nuxt@1.0.0 start /www/wwwroot/mysite.com
> PORT=3003 nuxt start到了这里我们就可以在浏览器上输入 mysite.com 访问了。服务端渲染瞬间出来了。
#### 别得意，这里还没完成呢。
，上面的效果是并不理想的，所以我们需要开启进程守护来稳定常驻后台

7、pm2 开启进程守护

pm2 start npm --name "my-nuxt" -- run start  //my-nuxt为我们自定义的项目名称，也是我们自定义的守护进程名称┌──────────┬────┬─────────┬──────┬───────┬────────┬─────────┬────────┬─────┬───────────┬──────┬──────────┐
│ App name │ id │ version │ mode │ pid   │ status │ restart │ uptime │ cpu │ mem       │ user │ watching │
├──────────┼────┼─────────┼──────┼───────┼────────┼─────────┼────────┼─────┼───────────┼──────┼──────────┤
│ my-nuxt  │ 0  │ 0.33.4  │ fork │ 23278 │ online │ 0       │ 0s     │ 0%  │ 15.6 MB   │ root │ disabled │
└──────────┴────┴─────────┴──────┴───────┴────────┴─────────┴────────┴─────┴───────────┴──────┴──────────┘出现了以上的图案数据，说明守护进程已经开启了。

OK，到了这里也就完成了，你可以放心的访问你的域名。就可以正常的访问啦。

第一步：NPM安装配置

vue可以直接下载.js文件引入项目文件中，也可以使用npm命令来安装。我们选择后者进行折腾。

先登录宝塔管理界面，点击右侧“软件商店”；

找到PM2，安装。如有分布式数据库，则安装：MongoDB

第二点：安装cnpm

因速度问题，我们使用npm的淘宝镜像cnpm来安装。

先安装cnpm；

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

第三步：安装VUE

再使用cnpm来安装vue.js；速度非常快，几秒时间即可。

# cnpm install vue

第四步：安装vue-cli，称为vue脚手架

cnpm install --global vue-cli

vue-cli这个构建工具降低了webpack的使用难度，相当于启动了一个请求服务器，给你搭建了一个测试环境。

第五步：安装完成后，再创建一个基于 webpack 模板的新项目，进行配置项目信息

vue init webpack vuedemo

创建过程中，会确认 project name等信息，并输入author；

一些确认直接回车即可；

第六步：创建完成后，进入项目目录vuedemo，安装依赖文件；

cnpm install

运行即可；因用错命令，使用了npm，安装有些慢，直接停止使用cnpm安装，速度超快；

第七步：运行程序

cnpm run dev

出现Listening at http://localhost:8080表示运行成功；

当前是localhost，我们修改为ip方式；

在项目目录下有一个package.json，编辑即可。

直接使用宝塔面板进行编辑修改；

直接找到config下的index.js进行修改，换成当前公网ip，保存即可。

再去目录下cnpm run dev执行；

更多文章参考：https://www.webpackjs.com/concepts/dependency-graph/

https://blog.csdn.net/solar_lan/article/details/82751165

http://www.cainiaoxueyuan.com/tag/webpack/

https://jingyan.baidu.com/article/19020a0a574fbc529d2842ef.html

https://segmentfault.com/a/1190000018930898?utm_source=tag-newest

在宝塔环境下安装VUE 及webpack相关推荐

离线/内网环境下搭建vue开发环境
系列文章目录第一讲离线/内网环境下搭建vue开发环境第二讲内网环境运行maven项目目录外网环境搭建一.安装nodeJS 二.安装vue依赖包内网环境正式开始准备工作: 一.安装no ...
MySQL rpm包二进制区别_Linux环境下安装mysql5.6(二进制包不是rpm格式)
一.准备: 1.CentOS release 6.8 2.mysql-5.6.31-linux-glibc2.5-x86_64.tar.gz 3.Linux下MySQL5.6与MySQL5.7安装方法 ...
Linux环境下安装nginx
大家好,本篇文章主要讲的是Linux环境下安装nginx教程,感兴趣的同学赶快来看一看吧,对你有帮助的话记得收藏一下,方便下次浏览 1.安装所需环境 //安装gcc yum install gcc-c ...
linux安装python虚拟环境_linux环境下安装python虚拟环境及注意事项
创建python虚拟环境virtualenv.virtualenvwrapper 1,为什么需要搭建虚拟环境由于当机器上两个项目依赖于相同包的不同版本时,会导致项目运行失败,此时可以安装虚拟环境 . ...
python连接opencv库_python环境下安装opencv库的方法
注意:安装opencv之前需要先安装numpy,matplotlib等一.安装方法方法一.在线安装 1.先安装opencv-python pip install opencv-python --u ...
python爬虫scrapy步骤mac系统_Mac中Python 3环境下安装scrapy的方法教程
前言最近抽空想学习一下python的爬虫框架scrapy,在mac下安装的时候遇到了问题,逐一解决了问题,分享一下,话不多说了,来一起看看详细的介绍吧. 步骤如下: # 在Mac上Python3环境 ...
docker 启动命令_Jenkins视频课程在Docker环境下安装Jenkins，命令行如何启动Jenkins...
Tomcat是Apache开发的一款servlet容器,可以提供java服务,作为服务器来使用.Jenkins是开源CI&CD软件领导者, 提供超过1000个插件来支持构建.部署.自动化, 满 ...
在Mac OS环境下安装MySQL服务
在Mac OS环境下安装MySQL服务作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 我之前介绍过window环境下安装mysql服务,以及在Linux环境下安装mysql服务,今 ...
linux 查看mysql安装目录_Linux环境下安装MySQL数据库示例教程
点击上方SQL数据库开发,关注获取SQL视频教程 SQL专栏 SQL数据库基础知识汇总 SQL数据库高级知识汇总 Linux环境对大多数SQL初学者还是比较陌生,今天给大家演示一下如何在Linux环境 ...

在宝塔环境下安装VUE 及webpack

在宝塔环境下安装VUE 及webpack相关推荐

最新文章

热门文章