项目部署配置

记录一下项目部署
（主要我老忘记，不停的麻烦别人，笨蛋式记录）

一、如果是vue init webpack 创建的项目

1、vue.config.js

const path = require("path");
const resolve = (dir) => path.join(__dirname, dir);
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin"); //引入compression-webpack-plugin

module.exports = {
  publicPath: "/", //基本路径
  outputDir: "dist", //构建时的输出目录
  assetsDir: "decisionAnalysis", //放置静态资源的目录
  indexPath: "decisionAnalysis.html", //html 的输出路径
  // pwa: {
  //   iconPaths: {
  //       favicon32: 'rxgh_favicon.ico',
  //       favicon16: 'rxgh_favicon.ico',
  //       appleTouchIcon: 'rxgh_favicon.ico',
  //       maskIcon: 'rxgh_favicon.ico',
  //       msTileImage: 'rxgh_favicon.ico'
  //   }
  // },
  filenameHashing: true, //文件名哈希值
  lintOnSave: false, //是否在保存的时候使用 `eslint-loader` 进行检查。

  // //组件是如何被渲染到页面中的？ （ast：抽象语法树；vDom：虚拟DOM）
  // //template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
  // //runtime-only：将template在打包的时候，就已经编译为render函数
  // //runtime-compiler：在运行的时候才去编译template
  // runtimeCompiler: false,

  // transpileDependencies: [], //babel-loader 默认会跳过 node_modules 依赖。
  // productionSourceMap: false, //是否为生产环境构建生成 source map？

  //调整内部的 webpack 配置
  configureWebpack: (config) => {
    // if (NODE_ENV !== 'development') { //生产环境或者测试环境
    config.devtool = "hidden-source-map";
    config.plugins.push(
      new CompressionPlugin({
        /* [file]被替换为原始资产文件名。
             [path]替换为原始资产的路径。
             [dir]替换为原始资产的目录。
             [name]被替换为原始资产的文件名。
             [ext]替换为原始资产的扩展名。
             [query]被查询替换。*/
        filename: "[path].gz[query]",
        //压缩算法
        algorithm: "gzip",
        //匹配文件
        test: /\.js$|\.css$|\.html$/,
        //压缩超过此大小的文件,以字节为单位
        threshold: 5240,
        minRatio: 0.8,
        //删除原始文件只保留压缩后的文件
        // deleteOriginalAssets: true
      })
    );
    // }else{
    //   config.devtool = 'source-map'
    // }
  },

  chainWebpack: (config) => {
    // if (process.env.NODE_ENV === 'development')
    config.plugins.delete("prefetch");
    config.resolve.alias
      .set("vue$", "vue/dist/vue.esm.js")
      .set("@", resolve("src"));
  },

  // 配置 webpack-dev-server 行为。
  devServer: {
    host: "0.0.0.0",
    port: 80, // 端口号
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览
    //显示警告和错误
    overlay: {
      warnings: false,
      errors: true,
    },
    proxy: {
      "/api/": {//一般baseUrl的命名是根据后端接口域名后面连接的字符串，比如说https://xxxxx.cn/api,这里就取名api
        target: "https:/xxxxx.cn/api",
        changeOrigin: true, // 是否跨域
        ws: false, // 是否支持webssocket
        secure: false, // 如果是https接口，需要配置这个参数
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
};

2、router.js

const router = new VueRouter({
  mode: "history",
  base: "decisionAnalysis",//这里base的命名要和vue.config.js里放静态资源的目录一致
  routes,
});

3、在写接口的时候用上vue.config.js配置的baseUrl

let baseURL = "/api";
const service = axios.create({
  baseURL,
  timeout: 6000,
});

3.保存，命令行跑npm run build.然后在静态资源文件夹找到dist文件夹，打包丢给运维。告诉他域名是https://xxxxx.cn/api/swagger-ui.html#/，代理到这个前端资源上，访问路径是xxxx.cn/yyyy(随你命名)

他部署好了，就可以访问了。