前端准备

# 前端准备

# 开源地址

# 博客模块线上地址

# 快速上手

开发必备

如果以下命令有问题,请删除yarn.lock,node_modules文件夹后,重新执行yarn,yarn serve

# clone the project
git clone https://github.com/luoyunchong/lin-cms-vue.git

# install dependency
yarn

# develop
yarn serve

# deploy
yarn deploy
1
2
3
4
5
6
7
8
9
10
11

# deploy 发布

scp2方便快速发布,一行命令就能快速发布成功。

必备条件:(参数)

  • 一台linux的服务器,ip
  • 用户名
  • 密码
  • 端口:默认是22
  • 发布的地址。这里放到/var/www/lin-cms-vue目录中。

# 步骤

根目录新建deploy目录,创建index.js文件。

'use strict'
// 引入scp2模块
var client = require('scp2');
const ora = require('ora')
const chalk = require('chalk')
const spinner = ora('正在发布到生产服务器...')
spinner.start()
client.scp('dist/', {
    "host": "",
    "username": "",
    "password": "",
    "port": "22",
    "path": "/var/www/lin-cms-vue"
}, function (err) {
    spinner.stop()
    if (!err) {
        console.log("npm run build-scp2: scp2工具上传完毕,远端服务路径:/var/www/lin-cms-vue")
    } else {
        console.log("err", err)
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

快速发布,需要安装 scp2

cnpm install scp2
1

package.json中增加

  "scripts": {
    "deploy": "yarn build:production && node ./deploy",
}
1
2
3
yarn deploy
1

# nginx 配置

  • vue 使用history的配置
server {
    listen 8080;
    root /var/www/lin-cms-vue;

   charset utf-8;
   location / {
       try_files $uri $uri/ /index.html; 

     }
        
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 配置项

  1. 配置 api 地址: 打开配置文件 src/config/index.js 配置 baseUrl ,本地开发阶段配置本地虚拟域名(https://localhost:5001/),线上部署生产域名。

  2. 用户名:admin 密码 123qwe