Vue3项目部署到tomcat8.5服务器centos8_tomcat 8 发布vue

参考博客：
vue-cli3项目打包后自动化部署到服务器
vue-cli3如何部署在服务器的tomcat,以及vue.config.js如何配置才能上线（亲测可用)
首先需要保证tomcat服务器在8090端口（我的Vue项目运行在8090端口上）正常运行，并在tomcat的webapps文件夹下创建dist文件夹

1.修改vue.config.js参数

const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'));
        const svgRule = config.module.rule("svg");
        svgRule.uses.clear();
        svgRule
        .use("svg-sprite-loader")
        .loader("svg-sprite-loader")
        .options({
            symbolId: "icon-[name]"
         });
       },
    ///这行开始是为了发布设置的参数
    //基本路径
    publicPath: './',
    outputDir: 'dist',
    // 放置静态资源的地方 (js/css/img/font/...)
    assetsDir: 'static',
    //以多页模式构建应用程序。
    pages: undefined,
    //是否使用包含运行时编译器的 Vue 构建版本
    runtimeCompiler: false,
    parallel: require('os').cpus().length > 1,
    // 是否为生产环境构建生成 source map？
    productionSourceMap: false,
    这行结束
    devServer: {
        port: 8090,     // 端口,首先要确认tomcat在8090端口能正常启动
    },
    lintOnSave: false   // 取消 eslint 验证

};
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

2.修改Router

export default new VueRouter({
    mode: 'hash', //为了上线的配置，本地请注释掉
    base:'/dist',//为了上线的配置，本地请注释掉
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRouterMap //指定路由列表
})
1
2
3
4
5
6

3.增加自动化部署脚本

npm install scp2 --save-dev
1

和 package.json平级建立upload.js
代码如下（亲测可用）：

'use strict'
// 引入scp2
var client = require('scp2');

client.scp('./dist/', {    // 本地打包文件的位置
    "host": '*****', // 服务器的IP地址
    "port": '22',            // 服务器端口， 一般为 22
    "username": 'root',       // 用户名,可以登录服务器的用户名
    "password": '****',     // 密码
    "path": '/usr/local/apache-tomcat-8.5.65/webapps/dist'            // 项目部署的服务器目标位置
}, err =>{
    if (!err) {
        console.log("项目发布完毕!")
    } else {
        console.log("err", err)
    }
})

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

稍微美化一下控制台的输出（该脚本我并没有测试，此处只是记录）

'use strict'
// 引入scp2
var client = require('scp2');
// 下面三个插件是部署的时候控制台美化所用 可有可无
const ora = require('ora');
const chalk = require('chalk');
const spinner = ora(chalk.green('正在发布到服务器...'));
spinner.start();

client.scp('./dist/', {    // 本地打包文件的位置
  "host": 'XXX.XX.XX.XXX', // 服务器的IP地址
  "port": 'XX',            // 服务器端口， 一般为 22
  "username": 'XXX',       // 用户名
  "password": '*****',     // 密码
  "path": 'XXX'            // 项目部署的服务器目标位置
}, err =>{
  spinner.stop();
  if (!err) {
    console.log(chalk.green("项目发布完毕!"))
  } 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
22
23
24

记得项目git上传时忽略此文件, 因为这里面包含了你的服务器地址、用户以及密码
在 package.json中添加 scripts 命令,如下

{
  "name": "login",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "upload": "node upload.js",//增加！！！！！！！！！！
    "deploy": "npm run build && npm run upload"//增加！！！！！！
  },
  "dependencies": {
    "alipay-sdk": "^3.1.5",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "dns": "^0.2.2",
    "element-ui": "^2.4.5",
    "js-cookie": "^2.2.1",
    "net": "^1.0.2",
    "tinymce": "^5.7.0",
    "vue": "^2.6.11",
    "vue-lazyload": "^1.3.3",
    "vue-router": "^3.5.1",
    "vue-session": "^1.0.0",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.0.3",
    "scp2": "^0.5.0",
    "svg-sprite-loader": "^5.2.1",
    "vue-cli-plugin-element": "~1.0.1",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

执行脚本

npm run deploy
1

此时./startup.sh启动tomcat服务器
访问
http://xxx.xxx.xxx.xxx:8090/dist/#/
(#号部分不加应该也可以)
可以看到项目正常运行