它不同于vue-cli2.x的配置方法,将所有的配置文件的文件建好,而是将好多配置已经配置好,如果想修改默认的配置,需要在项目的根路径下面新建一个vue.config.js文件。
如下所示:
在vue.config.js文件中的配置大概如下:
const webpack = require("webpack"); const CompressionWebpackPlugin = require('compression-webpack-plugin'); const productionGzipExtensions = ['js', 'css']; require("babel-polyfill"); module.exports = { publicPath: './',//打包后的位置(如果不设置这个静态资源会报404) // publicPath: process.env.NODE_ENV === 'production' ? 'http://47.92.237.225:8080/dist' : './', outputDir: 'dist',//打包后的目录名称 assetsDir: 'static',//静态资源目录名称 productionSourceMap:false, //去掉打包的时候生成的map文件 lintOnSave: true, filenameHashing: false, devServer: { sockHost: 'http://47.92.237.225:1111/', disableHostCheck: true, host: '0.0.0.0', //不清楚主机和目的网络 port: 1111, // 源地址端口,自行修改 disableHostCheck: true, hotOnly: false, useLocalIp: false, proxy: { '/ser':{ target:'http://127.0.0.1:8080/', //跨域的域名 ws: true, // 代理 websockets changeOrigin: true, //是否开启跨域 pathRewrite:{ '^/ser':'/' // 重写地址 } } headers: { 'Access-Control-Allow-Origin': '*', } }, configureWebpack: { plugins: [ // 配置jquery new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery", Popper: ["popper.js", "default"] }), new CompressionWebpackPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), //匹配文件名 // test: /\.js$|\.html$|.\css/, threshold: 10240, //对超过10k的数据压缩 minRatio: 0.8, deleteOriginalAssets: false //不删除源文件 }) ] } }