• vue管理系统从0到1-vue.config
  • Artiely
  • #vue
  • 2020-06-05
  • 163
  • 1 min read
  • loading...

vue管理系统从0到1-vue.config

官网

官网文档

将变量全局化

平时在定义css变量时总是得在每个页面去引用,这也太繁琐了,所以

const path = require('path')
module.exports = {
  // https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
  // 不是这个 https://www.npmjs.com/package/style-resources-loader
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, './src/assets/style/var.less')], // 引入全局样式变量
    },
  },
  // https://github.com/ant-design/ant-motion/issues/44
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
}

复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

同时我们为了更方便引用这么多的文件夹,避免各种返回层级,我们添加一些alias

  const path = require('path')
+ function resolve(dir) {
+   return path.join(__dirname, dir)
+ }
  module.exports = {
    // https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
    // 不是这个 https://www.npmjs.com/package/style-resources-loader
    pluginOptions: {
      'style-resources-loader': {
        preProcessor: 'less',
        patterns: [path.resolve(__dirname, './src/assets/style/var.less')], // 引入全局样式变量
      },
    },
    // https://github.com/ant-design/ant-motion/issues/44
    css: {
      loaderOptions: {
        less: {
          javascriptEnabled: true,
        },
      },
    },
+  configureWebpack: {
+    resolve: {
+      alias: {
+        '@': resolve('src'),
+        '@views': resolve('src/views'),
+        '@components': resolve('src/components'),
+        '@assets': resolve('src/assets'),
+        '@router': resolve('src/router'),
+        '@common': resolve('src/common'),
+        '@store': resolve('src/store'),
+        '@layout': resolve('src/layout'),
+        '@api': resolve('src/api'),
+        '@config': resolve('src/config'),
+      },
+    },
+  },
  }

复制成功
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

题外话

当我们在写代码的时候或者使用插件的时候尽量留下插件出处,后期好维护和定位问题!

第三步!