vue+koa+ mysql 部署服务器_vue 打包后的文件部署到koa服务器上的方法

准备项目

• vue 项目
• koa 项目

购买服务器以及服务器设置

• 镜像设置
  我购买的是腾讯云服务器，采用的是node.js镜像，省的我自己安装环境了。
  
• 重置密码， 后面所有的服务器命令操作均在vnc登录后的web页面中执行。
  
   

项目设置

• vue项目

增加 vue.config.js文件, 随后进行npm run build打包

module.exports = {

    /* 部署应用包的基本URL */
    publicPath: "./",
    /* 生产环境构建文件的目录 defalut: dist */
    outputDir: "dist",
    /* 放置生成的静态文件目录（js css img） */
    assetsDir: "static",
    /* 指定生成的index.html 输出路径 相对 default: index.html */
    indexPath: "index.html",
    /* 指定生成文件名中包含hash default: true */
    filenameHashing: true,
    /* 是否保存时 lint 代码 */
    lintOnSave: process.env.NODE_ENV === "production",
    /* 是否使用编译器 default: false */
    runtimeCompiler: false,
    /* 默认babel-loader会忽略node_modules中的文件，你想显示的话在这个选项中列出来 */
    // transpileDependencies: [],
    /* 生产环境的source map */
    productionSourceMap: false,
     // crossorigin: "",
    integrity: false,
    configureWebpack: {
        resolve: {
            alias: {
                'assets': '@/assets',
                'components': '@/components',
                'views': '@/views',
            }
        }
    },
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

• koa项目

在koa项目根目录下新建文件夹plank-web(自定义名称)，将vue项目打包的dist文件夹中的文件复制进此文件夹。

koa项目 app.js中增加以下代码，目的是替换掉原koa 的web页面。

const app = new Koa() // 应该已经有了

app.use(require('koa-static')(__dirname + '/plank-web')) // plank-web为自定义文件夹名
1
2
3

koa项目中bin/www文件中更改端口号3000 为3001，因为node服务占据了3000端口，如果要继续使用3000端口，需要先kill掉进程，太麻烦，于是我直接改为了3001端口.(记得vue项目调用api时也更改为3001端口)

var port = normalizePort(process.env.PORT || '3001'); // 默认为3000
1

 

服务器配置mysql

// 检测是否已安装mysql

rpm -qa | grep mysql

// 安装mysql和mysql-server

yum install -y mysql
yum install -y mysql-server

// 启动mysql

service mysqld start

// 查看mysql启动状态

service mysqld status

// 设置mysql密码 可能需要输入原密码 默认密码为空

mysqladmin -u 用户名 password 密码
如：mysqladmin -u root password 123456

// 修改mysql密码 需要输入原密码 默认密码为空

mysqladmin -u 用户名 -p password 新密码
如：mysqladmin -u root -p password 123456

// 创建数据库以及执行sql文件

• mysql -u root -p
• 输入密码
• use mysql // 使用数据库mysql
• create database 数据库名 如： create database abc
• use abc // 使用数据库mysql
• source 文件地址 // 执行sql文件 sql文件使用xftp上传至服务器

koa与vue项目部署服务器

• 下载xftp
• 通过xftp将koa项目根目录下所有文件上传至服务器任意文件夹下，其中包括已经在根目录下的vue的打包文件
• 通过上文说的VNC登录进入刚刚上传的koa项目根目录
• 执行npm install
• npm start 即开始运行项目。此时登录 ip:3001即可见页面。
   

配置pm2

采用npm start运行的项目，控制台一关闭便停止了，可以采用pm2长期运行项目

• npm install -g pm2
• 到koa根目录下 执行 pm2 start bin/www
  
  项目成功运行。

pm2其他常用指令

• pm2 stop 应用名(即 上图中的name列的文字，如上图中为 pm2 stop www) // 停止应用
• pm2 start 应用名 // 启动应用
• pm2 delete 应用名 // 删除应用
• pm2 list // 查看应用列表

 

nginx配置

由于vue中我使用的后端地址为直接写入，即不通过devServer，故也不需要nginx进行代理，于是未进行nginx配置。

上传服务器打包前，将localhost改为ip即可，当然直接使用localhost可能也是行的，我没尝试。