# # vue-cli

## # 案例

    const path = require('path');
    function resolve(dir) {
      return path.join(__dirname, dir);
    }
    const targetUrl = '[地址]';
    module.exports = {
      // Project deployment base
      // By default we assume your app will be deployed at the root of a domain,
      // e.g. https://www.my-app.com/
      // If your app is deployed at a sub-path, you will need to specify that
      // sub-path here. For example, if your app is deployed at
      // https://www.foobar.com/my-app/
      // then change this to '/my-app/'
      // baseUrl: '/web/app/img/',
      baseUrl: '/',

      // where to output built files
      outputDir: 'dist',

      // whether to use eslint-loader for lint on save.
      // valid values: true | false | 'error'
      // when set to 'error', lint errors will cause compilation to fail.
      lintOnSave: true,

      // use the full build with in-browser compiler?
      // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
      // compiler: false,

      // tweak internal webpack configuration.
      // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
      chainWebpack: config => {
        config.resolve.alias
          .set('@$', resolve('src'))
          .set('common', resolve('src/common'))
          .set('components', resolve('src/components'))
          .set('page', resolve('src/page'))
          .set('config', resolve('src/config'))
          .set('layout', resolve('src/layout'))
          .set('base', resolve('src/base'))
          .set('static', resolve('src/static'));
        config.module
          .rule('pug')
          .test(/\.pug$/)
          .use('pug-html-loader')
          .loader('pug-html-loader')
          .end();
      },
      configureWebpack: () => {},

      // vue-loader options
      // https://vue-loader.vuejs.org/en/options.html
      // vueLoader: {},

      // generate sourceMap for production build?
      productionSourceMap: true,

      // CSS related options
      css: {
        // extract CSS in components into a single CSS file (only in production)
        extract: true,

        // enable CSS source maps?
        sourceMap: false,

        // pass custom options to pre-processor loaders. e.g. to pass options to
        // sass-loader, use { sass: { ... } }
        loaderOptions: {},

        // Enable CSS modules for all css / pre-processor files.
        // This option does not affect *.vue files.
        modules: false,
      },

      // use thread-loader for babel & TS in production build
      // enabled by default if the machine has more than 1 cores
      parallel: require('os').cpus().length > 1,

      // split vendors using autoDLLPlugin?
      // can also be an explicit Array of dependencies to include in the DLL chunk.
      // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
      // dll: false,

      // options for the PWA plugin.
      // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
      // pwa: {},

      // configure webpack-dev-server behavior
      devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
        proxy: {
          '/j': {
            target: `${targetUrl}/j`, //设置调用接口域名和端口号别忘了加http
            changeOrigin: true,
            pathRewrite: {
              '^/j': '/', //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替
              // 比如我要调用'http://0.0:300/user/add'，直接写‘/api/user/add’即可 代理后地址栏显示/
            },
          },
          '/o2o': {
            target: `${targetUrl}/o2o`,
            changeOrigin: true,
            pathRewrite: {
              '^/o2o': '/',
            },
          },
          '/moonclub': {
            target: `${targetUrl}/moonclub`,
            changeOrigin: true,
            pathRewrite: {
              '^/moonclub': '/',
            },
          },
        }, // string | Object
        before: app => {},
      },

      // options for 3rd party plugins
      pluginOptions: {
        // ...
      },
    };

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126

## # 配置

可参照下面链接中的文章进行配置
在 Vue 项目中(vue-cli2,vue-cli3)使用 pug 简化 HTML 的编写

## # vue.config.js

webpack.config.js

    module: {
      rules: [
        {
          test: /\.vue$/,
          use: [
            {
              loader: 'vue-loader',
              options: {
                loaders: {
                  stylus: [
                    {
                      loader: 'stylus-resources-loader',
                      options: {
                        resources: './src/assets/_base.styl',
                      },
                    },
                  ],
                },
              },
            },
          ],
        },
      ],
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

vue.config.js

    const path = require('path');
    module.exports = {
      chainWebpack: config => {
        config.module
          .rule('vue')
          .use('vue-loader')
          .tap(options => {
            options.loaders.stylus = options.loaders.stylus.concat({
              loader: 'stylus-resources-loader',
              options: {
                resources: path.resolve('./src/assets/_base.styl'),
              },
            });
            return options;
          });
      },
    };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17