# cts_system

**Repository Path**: jeffyer/cts_system

## Basic Information

- **Project Name**: cts_system
- **Description**: 考试管理系统
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-22
- **Last Updated**: 2023-03-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 对vue-admin-template进行修复搭建

## 1、改造流程

### 1.1、包的问题

- 推荐使用`yarn`工具安装依赖
- `core-js`版本问题
  - 卸载`core-js`执行`yarn remove core-js`
  - 安装最新的`yarn add core-js`
- 调整`vuex`的版本，目前是`3.1.0` 出现`vue`调试器无法调试`getters`问题。进行升级
  - 卸载`vuex`执行`yarn remove vuex`
  - 安装指定版本：`yarn add vuex@3.6.2`



### 1.2、配置调整

- `vue.config.js`调整

  ```js
  // vue.config.js 是脚手架的配置文件; 修改了必须重启项目
  // 使用js的严格模式， 注意：严格模式下 this如果指向undefined，说明指向window
  "use strict";
  // 导入nodejs的path模块
  const path = require("path");
  // 导入src下面的settings.js的配置
  const defaultSettings = require("./src/settings.js");
  //  将相对路径转为绝对路径
  function resolve(dir) {
    return path.join(__dirname, dir);
  }
  // 定义网页的标题
  const name = defaultSettings.title || "vue Admin Template"; // page title
  
  // 设置项目运行的端口(读取环境变量里面的prot，如果没有读取packagejson里面的port，如果还没有使用9528)
  const port = process.env.port || process.env.npm_config_port || 9528; // dev port
  const isProd = process.env.NODE_ENV === "production";
  
  //===> CDN资源设置 START
  let externals = {};
  let cdn = {
    css: [], // css的cdn资源网址
    js: [], // js的cdn资源网址
  };
  if (isProd) {
    externals = {
      // 键：值 【比较难的事情就是找对应版本的cdn资源文件；和该文件在全局的变量名称】
      // 键是包名, 值是该包在全局window下面(index.html)里面的全局变量名称
      // echarts: "echarts",
      // xlsx: "XLSX",
    };
    cdn = {
      css: [],
      js: [
        // "https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js",
        // "https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.mini.min.js",
      ],
    };
  }
  //===> CDN资源设置 END
  
  // 定义配置  https://cli.vuejs.org/config/
  module.exports = {
    // 资源引用路径
    publicPath: isProd ? "./" : "/",
    // 打包输出目录
    outputDir: "dist",
    // 打包静态文件目录
    assetsDir: "static",
    // 是否开启代码校验
    lintOnSave: process.env.NODE_ENV === "development",
    // 是否关闭map文件
    productionSourceMap: false,
    // 开发服务器介绍
    devServer: {
      port: port, // 端口号
      open: false, // 运行好了之后是否自动打开浏览器
      overlay: {
        warnings: false,
        errors: true,
      },
      // proxy要么写配置，不允许空着
      // proxy: {
      //   /*
      //    '/地址':{
      //       target:"跨域目标地址",
      //       changeOrigin:true  // 是否需要跨域
      //       pathRewrite:{   // 路径是否重写
      //         '^/地址': ''
      //       }
      //    }
      //    */
      // },
    },
    // webpack的配置【对象式配置】
    configureWebpack: {
      // provide the app's title in webpack's name field, so that
      // it can be accessed in index.html to inject the correct title.
      name: name, // 网页标题
      resolve: {
        // 路径解析
        alias: {
          "@": resolve("src"), // 如果遇到@src进行解析为根目录的scr目录
        },
      },
      // webpack打包的时候会排除的内容
      externals: externals,
    },
    // webpack的配置【函数式配置】
    chainWebpack(config) {
      // 配置html-webpack-plugins插件，注入cdn资源
      config.plugin("html").tap((args) => {
        args[0].cdn = cdn; // 相当于在index.html里面有个变量叫做cdn
        return args;
      });
      // it can improve the speed of the first screen, it is recommended to turn on preload
      config.plugin("preload").tap(() => [
        {
          rel: "preload",
          // to ignore runtime.js
          // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
          fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
          include: "initial",
        },
      ]);
  
      // when there are many pages, it will cause too many meaningless requests
      config.plugins.delete("prefetch");
  
      // set svg-sprite-loader
      config.module.rule("svg").exclude.add(resolve("src/icons")).end();
      config.module
        .rule("icons")
        .test(/\.svg$/)
        .include.add(resolve("src/icons"))
        .end()
        .use("svg-sprite-loader")
        .loader("svg-sprite-loader")
        .options({
          symbolId: "icon-[name]",
        })
        .end();
  
      config.when(process.env.NODE_ENV !== "development", (config) => {
        config
          .plugin("ScriptExtHtmlWebpackPlugin")
          .after("html")
          .use("script-ext-html-webpack-plugin", [
            {
              // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/,
            },
          ])
          .end();
        config.optimization.splitChunks({
          chunks: "all",
          cacheGroups: {
            libs: {
              name: "chunk-libs",
              test: /[\\/]node_modules[\\/]/,
              priority: 10,
              chunks: "initial", // only package third parties that are initially dependent
            },
            elementUI: {
              name: "chunk-elementUI", // split elementUI into a single package
              priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
              test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
            },
            commons: {
              name: "chunk-commons",
              test: resolve("src/components"), // can customize your rules
              minChunks: 3, //  minimum common number
              priority: 5,
              reuseExistingChunk: true,
            },
          },
        });
        // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
        config.optimization.runtimeChunk("single");
      });
    },
  };
  
  ```

- 修改`public/index.html`

  ```html
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
      />
      <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
      <title><%= webpackConfig.name %></title>
      <!-- 引入样式 -->
      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
      <link rel="stylesheet" href="<%=css%>" />
      <% } %>
      <!-- 引入JS -->
      <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%=js%>"></script>
      <% } %>
    </head>
    <body>
      <noscript>
        <strong
          >We're sorry but <%= webpackConfig.name %> doesn't work properly without
          JavaScript enabled. Please enable it to continue.</strong
        >
      </noscript>
      <div id="app"></div>
      <!-- built files will be auto injected -->
    </body>
  </html>
  ```

- 在`main.js`中解开`mock`

  ```js
  /**
   * If you don't want to use mock-server
   * you want to use MockJs for mock api
   * you can execute: mockXHR()
   *
   * Currently MockJs will be used in the production environment,
   * please remove it before going online ! ! !
   */
  const { mockXHR } = require("../mock");
  mockXHR();
  ```

- 把人资的全局组件搬过来

  





## 2、使用流程