创建文档

docs/02.前端/02.配置/01.BaseURL配置.md

@@ -0,0 +1,70 @@
+---
+title: BaseURL配置
+date: 2021-02-03 09:26:32
+permalink: /pages/b8a7ad/
+---
+# Base url设置
+
+::: tip
+当我们配置好后台接口后，往往后台都会跟一个路径。如 `http://127.0.0.1:8080/common` 中的 `/common`，我们需要根据生产环境，开发环境，阶段性环境来进行不同的配置
+:::
+
+## 配置开发环境
+
+开发环境需要配置文件 `./.env.development`
+
+``` properties
+# Base api,此处配置端口后面的Base URL
+VUE_APP_BASE_API = '/common'
+
+# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
+# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
+# It only does one thing by converting all import() to require().
+# This configuration can significantly increase the speed of hot updates,
+# when you have a large number of pages.
+# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
+# 此处默认开启，如需了解更多请访问上方URL
+VUE_CLI_BABEL_TRANSPILE_MODULES = true
+```
+
+## 配置阶段性环境
+
+阶段性环境配置文件 `./env.staging`
+
+- 前端后台部署在一起
+
+``` properties
+# 设置成部署环境
+NODE_ENV = production
+
+# Base api，配置
+VUE_APP_BASE_API = './'
+```
+
+- 前后端分离部署
+
+``` properties
+# 设置成部署环境
+NODE_ENV = production
+
+# Base api，分离部署需要添加http路径
+VUE_APP_BASE_API = 'http://192.168.1.123:8080/common'
+```
+
+## 配置生产环境
+
+阶段性环境配置文件 `./env.production`
+
+- 前端后台部署在一起
+
+``` properties
+# Base api
+VUE_APP_BASE_API = './'
+```
+
+- 前后端分离部署
+
+``` properties
+# Base api，分离部署需要添加http路径
+VUE_APP_BASE_API = 'http://192.168.1.123:8080/common'
+```

docs/02.前端/02.配置/02.vueconfig配置.md

@@ -0,0 +1,126 @@
+---
+title: vue.config.js文件配置
+date: 2021-02-03 09:26:32
+permalink: /pages/f410bd/
+---
+# vue.config.js
+
+::: tip
+本部分提供适当所需注释，如有其它配置更改需要，请查询[Vue-Cli](https://cli.vuejs.org/zh/config)
+:::
+
+``` js
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path')
+
+// If your port is set to 80,
+// use administrator privileges to execute the command line.
+// For example, on Mac: sudo npm run / sudo yarn
+const devServerPort = 9527 // TODO: get this variable from setting.ts
+const mockServerPort = 9528 // TODO: get this variable from setting.ts
+const name = 'Vue Typescript Admin' // TODO: get this variable from setting.ts
+
+module.exports = {
+  // 部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，
+  // 但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath
+  publicPath: './',
+  // 默认生成的打包文件夹路径
+  outputDir: 'dist',
+  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。    资源放的目录
+  assetsDir: './static',
+  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径    index的路劲和名字
+  indexPath: './index.html',
+  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
+  lintOnSave: process.env.NODE_ENV === 'development',
+  // 是否需要生成环境的 source map
+  productionSourceMap: false,
+  // 设置开发时的端口及后端目录
+  devServer: {
+    // 开发环境的启动端口
+    port: devServerPort,
+    open: true,
+    overlay: {
+      warnings: false,
+      errors: true
+    },
+    // progress: false,
+    proxy: {
+      '/common': {
+        // 开发环境的后台请求接口
+        target: 'http://127.0.0.1:8081' ,
+        changeOrigin: true, // needed for virtual hosted sites
+        ws: true, // proxy websockets
+        pathRewrite: {
+          // '^/common': ''
+        }
+      }
+    }
+  },
+  // 向 PWA 插件传递选项
+  pwa: {
+    name: name,
+    workboxPluginMode: 'InjectManifest',
+    workboxOptions: {
+      swSrc: path.resolve(__dirname, 'src/pwa/service-worker.js')
+    }
+  },
+  // 这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项
+  pluginOptions: {
+    'style-resources-loader': {
+      preProcessor: 'scss',
+      patterns: [
+        // 全局样式配置文件，加上自己的路径,不能使用(如下:alias)中配置的别名路径
+        path.resolve(__dirname, 'src/styles/_variables.scss'),
+        path.resolve(__dirname, 'src/styles/_mixins.scss')
+      ]
+    }
+  },
+  // 将代码公共部分集中打包，减少打包所需时间，是打包后的文件体积更小
+  chainWebpack(config) {
+    // provide the app's title in webpack's name field, so that
+    // it can be accessed in index.html to inject the correct title.
+    config.set('name', name)
+
+    // https://webpack.js.org/configuration/devtool/#development
+    // Change development env source map if you want.
+    // The default in vue-cli is 'eval-cheap-module-source-map'.
+    // config
+    //   .when(process.env.NODE_ENV === 'development',
+    //     config => config.devtool('eval-cheap-source-map')
+    //   )
+
+    config
+      .when(process.env.NODE_ENV !== 'development',
+        config => {
+          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: path.resolve(__dirname, 'src/components'),
+                  minChunks: 3, //  minimum common number
+                  priority: 5,
+                  reuseExistingChunk: true
+                }
+              }
+            })
+          config.optimization.runtimeChunk('single')
+        }
+      )
+  }
+}
+
+```
+