const path = require('path') function resolve (dir) { return path.join(__dirname, dir) } module.exports = { productionSourceMap: false, publicPath: './', outputDir: 'dist', configureWebpack: { optimization: { splitChunks: { cacheGroups: { app: { chunks: 'all', name: 'main', test: /[\\/]src[\\/](.*)[\\/]/ }, vendor: { test: /[\\/]node_modules[\\/][\\/]/, name: 'vendor', chunks: 'all' } } } } }, css: { loaderOptions: { less: { modifyVars: {}, javascriptEnabled: true } } }, devServer: { open: true, /* 设置为0.0.0.0则所有的地址均能访问 */ host: '0.0.0.0', port: 8081, https: false, hotOnly: false, proxy: { /* 详解: 1、proxy 里面的'/api'什么意思? 答:作用是是告诉node, 我的接口要是以'/api'开头的才用代理.例如:App.vue中的请求接口地址 "/api/user" 符合以/api开口的条件,所以会被代理, 最后代理的路径 由http://localhost:8081/api/user ==》变成 http://10.10.38.94:3000/api/user 虽然浏览器的Network的Headers/General URL还是http://localhost:8081/api/user,但实际上在请求后,被node代理服务器悄悄代理成了http://10.10.38.94:3000/api/user再去请求真实后代接口地址 2、pathRewrite里面的‘^/api’:'' 什么意思? 答:由上面可知,代理成了http://10.10.38.94:3000/api/user,但是我们实际的真实后台接口地址是http://10.10.38.94:3000/user,所以在请求前一刻,需要将/api去除(把/api给重写成空字符串了)。 '^/api'是一个正则表达式,表示要匹配请求的url中,全部http://localhost:8081/api/user 转接为 http://10.10.38.94:3000/user */ '/api': { /* 目标代理服务器地址 */ // target: 'https://wmsxz.yfve.com.cn/', // target: 'https://bi.ciemis.com/api/', // target: 'https://mi.ciemis.com/api/', target: 'http://localhost:8888/', // target: 'http://172.19.138.173:2020/', /* 允许跨域 */ changeOrigin: true, logLevel: 'debug', pathRewrite: { '^/api': '' } } } }, chainWebpack: config => { // config.resolve.alias.set("@$", resolve("src")).set("@views", resolve("src/views")); config.resolve.alias.set('@$', resolve('src')) }, assetsDir: 'assets', runtimeCompiler: true, transpileDependencies: [ 'vuetify' ] }