前期接了个私人项目,做个官网,想到在公司都是使用vue
技术栈,而官网刚好可以使用nuxt来做。
开始
安装
nuxt
安装可以按照官网的步骤来
// 默认安装 create-nuxt-app
yarn create nuxt-app <project-name>
cd <project-name>
yarn dev
使用预处理器
项目下直接安装对应的预处理器
yarn add less less-loader
全局组件
在plugins
文件夹下创建lib-components.js
文件
import Vue from 'vue';
import LoadImage from "../components/LoadImage";
const components = { LoadImage };
Object.entries(components).forEach(([name, component]) => {
Vue.component(name, component)
});
在nuxt.config.js
文件中配置
...
plugins: [
...
'@/plugins/lib-components'
],
...
挂载全局http请求
如果我们想在全局来做请求,在传统的vue
项目中,我们可以在main.js
中挂载到原型上,而在nuxt
项目上还是通过plugins
目录。
// 在plugins目录中建立request.js
// axios 配置可自定义
Vue.use({
install: function(Vue) {
Vue.prototype.$http = http;
}
});
在nuxt.config.js
文件中配置
...
plugins: [
...
'@/plugins/request'
],
...
其他的配置与问题其实都可以在官网中查到,语法与vue
完全无缝对接。
部署
项目编写完成后要部署到线上,因为这个项目还是一个前后端分离的项目,且前端还是使用nginx
来做代理。
安装node
服务器使用的是centos
系统,可以使用yum
安装
curl -sL https://rpm.nodesource.com/setup_10.x | bash -
yum install -y nodejs
node -v
拷贝文件
- 先本地执行
yarn build
命令 - 拷贝下面标记的文件至服务器部署目录
/opt/deploy/front
进入目录执行
cd /opt/deploy/front
npm install -production
npm run start
nginx配置
server {
listen 80;
server_name www.test.com;
location / {
root /opt/deploy/front; # 前端文件目录
proxy_pass http://127.0.0.1:3000;
}
}
启动nginx
后可以访问域名看到项目。
pm2守护进程
对于线上项目,如果直接通过 node app
来启动,如果报错了可能直接停止导致整个服务崩溃,我们可以使用pm2
对node
进程管理
- 安装
npm install pm2 -g
- 项目根目录创建
pm2.json
[
{
"name": "demo",
"script": "npm run start",
"env_dev": {
"NODE_ENV": "development"
},
"env_production": {
"NODE_ENV": "production"
}
}
]
- 启动
pm2
cd /opt/deploy/front
pm2 start pm2.json
- 常用
pm2
指令
pm2 start app.js # 启动app.js应用程序
pm2 start app.js --name="demo" # 启动应用程序并命名为 "demo"
pm2 start app.js --watch # 当文件变化时自动重启应用
pm2 start script.sh # 启动 bash 脚本
pm2 list # 列表 PM2 启动的所有的应用程序
pm2 show [app-name] # 显示应用程序的所有信息
pm2 logs # 显示所有应用程序的日志
pm2 logs [app-name] # 显示指定应用程序的日志
pm2 stop all # 停止所有的应用程序
pm2 stop 0 # 停止 id为 0的指定应用程序
pm2 restart all # 重启所有应用
pm2 restart 0 # 重启id为0 的应用程序
pm2 delete all # 关闭并删除所有应用
pm2 delete 0 # 删除指定应用 id 0
pm2 startup # 创建开机自启动命令
pm2 save # 保存当前应用列表
总结
整个项目从开始安装到部署上线还是很平滑的,毕竟都是使用的vue
技术栈;但是还是有可以优化的空间,该项目不是一个完整的ssr
项目,没有很好的运用nuxt
特性。
欢迎关注公众号,大家一起共同交流和进步。