- 说明

- 配置

  - BaseURL配置
  - vue.config.js文件配置

- 代码示例

- 组件

- 前端
- 配置

haocheng Liu
2021-02-03

# vue.config.js文件配置

# # vue.config.js

提示

本部分提供适当所需注释，如有其它配置更改需要，请查询Vue-Cli
(opens new window)

    // 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')
            }
          )
      }
    }

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
上次更新: 2021/02/03, 17:01:33
BaseURL配置
Api示例

← BaseURL配置 Api示例→

最近更新

  01
DataMap
02-05

  02
实体类
02-05

  03
update操作
02-05

更多文章>

Theme by Vdoing | Copyright © 2021-2023 Haocheng Liu | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式