template-parking-h5/vue.config.js

const path = require('path');
const postcssPxToViewport = require('./postcss.config');
const vueSrc = 'src';
const CDN_URL = process.env.CDN_URL || '';

module.exports = {
  publicPath:
    process.env.NODE_ENV === 'production' ? (CDN_URL ? CDN_URL : '/') : '/',
  assetsDir: 'static',
  css: {
    loaderOptions: {
      // 给 less-loader 传递 Less.js 相关选项
      less: {
        lessOptions: {
          // javascriptEnabled: true,
        },
        additionalData: `@import "@/styles/common.less";`,
      },
      // scss: {
      // 	// prependData: [path.resolve(__dirname, './src/uni.scss')],
      // 	sassOptions: {
      // 		additionalData: `@import "~@/uni.scss";`
      // 	}
      // },
      scss: {
        additionalData: `@import "~@/uni.scss";`,
      },
    },
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, './src/styles/common.less')],
    },
  },
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use('postcss-style-px-to-viewport')
      .loader('postcss-style-px-to-viewport')
      .options(postcssPxToViewport.plugins['postcss-px-to-viewport'])
      .end();
    config
      .plugin('html')
      .tap((args) => {
        args[0].title = '临时停车';
        return args;
      })
      .end();
    config.module
      .rule('images') //.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('url-loader')
      .tap((args) => {
        const newArgs = Object.assign({}, args, {
          limit: 4096,
          // 这里重要，publicPath 配置给url-loader 会不生效，必须配置到fallback里传递给file-loader
          fallback: {
            loader: 'file-loader',
            options: {
              name: '[name].[hash:8].[ext]',
              publicPath:
                process.env.NODE_ENV === 'production'
                  ? CDN_URL + '/static/img'
                  : '/static/img',
              outputPath: 'static/img',
            },
          },
        });
        return newArgs;
      })
      .end();
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.join(__dirname, vueSrc),
      },
    },
  },
  devServer: {
    proxy: {
      '/profileApi': {
        target: 'https://qa-apim.kerryplus.com/c/api', //代理地址，这里设置的地址会代替axios中设置的baseURL
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        //ws: true, // proxy websockets
        //pathRewrite方法重写url
        pathRewrite: {
          '^/profileApi': '',
          //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
          //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
        },
      },
      '/qaPayment': {
          target: 'https://qa-apim.kerryplus.com/c/api/payment/v1', //代理地址，这里设置的地址会代替axios中设置的baseURL
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        //ws: true, // proxy websockets
        //pathRewrite方法重写url
        pathRewrite: {
          '^/qaPayment': '',
          //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
          //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
        },
      },
    },
  },
};