Centos Linux 系统部署java程序（五、前端项目的打包和部署）

我们采用基于avue前端框架改进的saber前端框架为例

目录结构如下

    dist[目录]    // 编译打包后的程序路径
    node_modules[目录] // node依赖包存放位置
    public[目录]   //  公共资源，一般是静态资源
    src[目录]      //   vue源码，所有的前端处理都在这里面   
    .browserslistrc[文件]  
    .editorconfig[文件]
    .eslintrcjs[文件]
    .gitignore[文件]
    postcssrc.js[文件]
    babel.config.js[文件]   //  babel 配置文件
    build.sh[文件]  
    LICENSE[文件] 
    package.json[文件]   // 包管理配置
    package-lock.json[文件]  
    README.md[文件]
    vue.config.js[文件]   //  vue 运行配置

打包

一般的打包命令如下：

vue-cli-service build

也可以根据实际情况增加配置参数，如

vue-cli-service build --mode=production

执行过程中，它会先删除dist目录所有内容，再重新构建dist目录的文件，因此需要确保dist目录没有被使用，否则会报错，无法完成打包

我们如果项目中，存在package.json，可以先看一下它的内容

{
  "name": "saber-admin",
  "version": "4.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "analyz": "npm_config_report=true npm run build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
    "avue-plugin-ueditor": "^0.1.4",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "classlist-polyfill": "^1.2.0",
    "crypto-js": "^4.0.0",
    "element-ui": "^2.15.6",
    "js-base64": "^2.5.1",
    "js-cookie": "^2.2.0",
    "js-md5": "^0.7.3",
    "mockjs": "^1.0.1-beta3",
    "node-gyp": "^5.0.6",
    "nprogress": "^0.2.0",
    "portfinder": "^1.0.23",
    "script-loader": "^0.7.2",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.2",
    "vue-i18n": "^8.7.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.1.1",
    "@vue/cli-plugin-eslint": "^3.1.5",
    "@vue/cli-service": "^3.1.4",
    "chai": "^4.1.2",
    "node-sass": "^6.0.1",
    "sass-loader": "^10.0.5",
    "vue-template-compiler": "^2.5.17",
    "webpack-bundle-analyzer": "^3.0.3"
  },
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

从上面代码中，找到scripts部分的内容，我们可以看到有 serve build 等几个命令，那么我们也可以按以下命令形式进行打包，执行build

npm run build

举一反三，当然也可以执行以下这些命令，只不过每个的作用都不同，大家可以自己试试看。

npm run serve npm run lint npm run analyz npm run test:unit npm run test:e2e

执行完build, dist目录内容更新成功，则完成了打包。打包出来的内容是静态页面和相关的静态资源js和图片、样式等。

部署

静态页面的部署比较简单

nginx上启用一个目录，用于提供外部访问路径，将本地路径配置为静态资源文件夹所在的路径


location / {
        root /opt/web;
        index index.html index.htm;
    }

重启nginx

service nginx restart

到此就完成了静态资源的部署了。可以通过nginx的访问路径来确认是否已经部署成功。部署成功后，就可以访问静态页面了。

大家可以看看我的示例页面 : http://lab.yeegee.com