vue-cli3.0配置

vue.config.js配置

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')

function resolve(dir) {
    return path.join(__dirname, dir)
}

const name = defaultSettings.title || 'MY PROJECT' // page title
// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
const port = 9527 // 端口号

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
    // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。
    // 如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，
    // 则设置 publicPath 为 /my-app/ 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，
    // 这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。
    publicPath: './',
    // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
    outputDir: 'dist',
    // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    assetsDir: 'static',
    // lintOnSave: process.env.NODE_ENV === 'development',
    lintOnSave: false,//关闭eslint检查
    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
    // productionSourceMap: process.env.NODE_ENV === 'development',
    // 在vue cli3.0版本，新建vue.config.js文件在其中配置  css:{ sourceMap: true }老版本：设置 cssSourceMap:true
    css:{
        // 开发环境为true生产环境false
        sourceMap:process.env.NODE_ENV === 'development'
    },
    productionSourceMap: false,
    // 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，
    // 你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
    devServer: {
        //端口号
        port: port,
        //启动时是否自动默认浏览器
        // open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        // proxy: 'http://localhost:9528', //这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:9528
        // 如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。 
        proxy: {
            [process.env.VUE_APP_BASE_API1]: {
                target: `${process.env.VUE_APP_BASE_API1_URL}`,
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                  ['^' + process.env.VUE_APP_BASE_API1]: ''
                }
              },
              [process.env.VUE_APP_BASE_API2]: {
                target: `${process.env.VUE_APP_BASE_API2_URL}`,
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                  ['^' + process.env.VUE_APP_BASE_API2]: ''
                }
              },
              [process.env.VUE_APP_BASE_API3]: {
                target: `${process.env.VUE_APP_BASE_API3_URL}`,
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                  ['^' + process.env.VUE_APP_BASE_API3]: ''
                }
              },
        },
        // 在服务内部的所有其他中间件之后， 提供执行自定义中间件的功能。
        // after: require('./mock/mock-server.js')
    },
    configureWebpack: {
        // provide the app's title in webpack's name field, so that
        // it can be accessed in index.html to inject the correct title.
        name: name,
        resolve: {
            alias: {
                '@': resolve('src')
            }
        }
    },
    chainWebpack(config) {
        config.plugins.delete('preload') // TODO: need test
        config.plugins.delete('prefetch') // TODO: need test

        // set svg-sprite-loader
        config.module
            .rule('svg')
            .exclude.add(resolve('src/icons'))
            .end()
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end()

        // set preserveWhitespace
        config.module
            .rule('vue')
            .use('vue-loader')
            .loader('vue-loader')
            .tap(options => {
                options.compilerOptions.preserveWhitespace = true
                return options
            })
            .end()

        config
            // https://webpack.js.org/configuration/devtool/#development
            .when(process.env.NODE_ENV === 'development',
                config => config.devtool('cheap-source-map')
            )

        config
            .when(process.env.NODE_ENV !== 'development',
                config => {
                    config
                        .plugin('ScriptExtHtmlWebpackPlugin')
                        .after('html')
                        .use('script-ext-html-webpack-plugin', [{
                            // `runtime` must same as runtimeChunk name. default is `runtime`
                            inline: /runtime\..*\.js$/
                        }])
                        .end()
                    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: resolve('src/components'), // can customize your rules
                                    minChunks: 3, //  minimum common number
                                    priority: 5,
                                    reuseExistingChunk: true
                                }
                            }
                        })
                    config.optimization.runtimeChunk('single')
                }
            )
    },
    //favicon.ico图标设置
    pwa: {
        iconPaths: {
          favicon32: 'favicon.ico',
          favicon16: 'favicon.ico',
          appleTouchIcon: 'favicon.ico',
          maskIcon: 'favicon.ico',
          msTileImage: 'favicon.ico'
        }
      }
}

接上面代理环境配置
根目录下新建.env.development文件
文件内容如下

ENV = 'development'
VUE_APP_BASE_API1 = '/aaa'
VUE_APP_BASE_API1_URL = 'http://xxx:2001/aaa/v1'

VUE_APP_BASE_API2 = '/bbb'
VUE_APP_BASE_API2_URL = 'http://xxx:2002/bbb/v1'

VUE_APP_BASE_API3 = '/ccc'
VUE_APP_BASE_API3_URL = 'http://xxx:2003/ccc/v1'

每个请求调用接口所在的服务

import request from '@/utils/request'

export function getTokenId(da'ta) {
  return request({
    url: '/aaa/auth/tokens',
    method: 'post',
    data //data所传数据放在body里 param数据放在url路径里data:data =>data
  })
}
export function getCatalog(name) {
  return request({
    url: '/bbb/auth/catalog?name='+name, //字符串模板`/bbb/auth/catalog?name='${name}`
    method: 'get',
  })
}