nuxt项目部署(windows环境)
项目是由vue-cli转换过来的,编码工作是前端兄弟做的,然后给到我这边去部署,我压根不懂nuxt项目,这可把我折腾坏了,还好最后还是搞定了 (^▽ ^),赶紧记录一下。首先把配置贴上来:package.json{"name": "ssr","version": "1.0.0","description": "My cat's pajamas Nuxt.js...
·
项目是由vue-cli转换过来的,编码工作是前端兄弟做的,然后给到我这边去部署,我压根不懂nuxt项目,这可把我折腾坏了,还好最后还是搞定了 (^▽ ^),赶紧记录一下。
首先把配置贴上来:
package.json
{
"name": "ssr",
"version": "1.0.0",
"description": "My cat's pajamas Nuxt.js project",
"author": "keffSha",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node server/index.js",
"generate": "nuxt generate"
},
"dependencies": {
"@nuxtjs/axios": "^5.3.6",
"@nuxtjs/proxy": "^1.3.3",
"@nuxtjs/router": "^1.5.0",
"cross-env": "^5.2.0",
"echarts": "^4.4.0",
"element-ui": "^2.4.11",
"jquery": "^3.4.1",
"koa": "^2.6.2",
"moment": "^2.24.0",
"net": "^1.0.2",
"nuxt": "^2.0.0",
"nuxt-start": "^2.10.2",
"sockjs-client": "^1.4.0",
"stompjs": "^2.3.3",
"vue-awesome-swiper": "^3.1.3",
"vue-cropper": "^0.4.9"
},
"devDependencies": {
"element-theme-chalk": "^2.12.0",
"node-sass": "^4.13.0",
"nodemon": "^1.18.9",
"sass-loader": "^8.0.0"
}
}
项目结构是这样的
我的部署流程是这样的:
- 在本地运行npm run build,打包成功后,将下列文件复制到服务器!
本地目录:
服务器目录:
- 然后在服务器的当前目录下,执行npm install -production
- 下载完成后,执行npm start,试试直接运行是否成功(我的是成功的,访问127.0.0.1:8888能访问成功)
端口号配置:
现在改成用PM2启动(不知道什么是PM2的请自行百度)
- 全局安装PM2:npm i pm2 -g
- 设置PM2开机自启:
- 安装并配置pm2-windows-service:npm i -g pm2-windows-service
- 添加系统环境变量(右键 [我的电脑] - [属性] - [高级系统设置] - [环境变量] - 新建 [系统变量] ) PM2_HOME=C:\Users\Administrator.pm2(路径默认在当前用户下的.pm2)
- 以管理员权限打开新的cmd命令行窗口,执行以下命令来安装服务
pm2-service-install 提示Perform environment setup ? 选 n, 继续,此时, PM2服务已安装成功并已启动, 可以通过 [win + r] - [services.msc]
来查看,服务名称为PM2
- 使用pm2启动nuxt项目:
pm2 start ./node_modules/nuxt/bin/nuxt.js -- start
这里踩坑最多!!!
网上流传的启动方式:pm2 start npm – run start(失败)
其他方式:
1. pm2 start node_modules/nuxt/bin/nuxt-start --name xxx(我压根就没有nuxt-start.js这个东西,然后执行npm install --save nuxt-start下载了nuxt-start,还是失败)
2. pm2 start ./node_modules/nuxt/bin/nuxt.js – start(成功!!!),虽然查看log还是有报红,但是访问成功了
- pm2 save
保存当前pm2 正在管理的NodeJS服务, 并在开机后恢复这些服务,保存路径为系统环境变量设置的PM2_HOME路径
nginx配置(参照网上教程即可,没踩什么坑)
这里就直接贴代码吧
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;
# 你的nuxt地址
proxy_pass http://127.0.0.1:8888;
}
为了弄这个玩意儿,百度谷歌了好几天啊,总算弄好了。
参考链接:
- 很关键的issues:pm2 issues
- Nuxt项目的部署
- 在windows环境下部署nuxt项目(线上发布部署)
- Node pm2如何做进程管理Nuxt项目
- nuxt项目在windows环境下安装部署
…(还有一些零零散散的,就不写出来了)
更多推荐
已为社区贡献3条内容
所有评论(0)