vue config配置文件常用项解析及延伸

dev部分

// Paths
assetsSubDirectory: 'static',   // 指的是静态资源文件夹，默认为'static'
assetsPublicPath: '/',          // 指的是发布路径，以上两项在build里面也有，修改之后没有发现变化的地方，作用区域还有待发现
proxyTable: {},                 // 常用来配置代理、跨越API，在下面附上配置教程

// Various Dev Server settings
host: '192.168.3.20',           // 测试地址，默认为'localhost'。这里我配置为本机的ip地址，方便手机同步测试(需要关闭防火墙)
port: 8181,                     // 测试地址端口，默认为'8080'，不可为空
autoOpenBrowser: false,         // 是否自动打开浏览器
errorOverlay: true,
notifyOnErrors: false,           // 是否展示错误的通知，附图1

附图1

build部分

// Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),     // 打包的主页路径

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),           // 打包的根路径
    assetsSubDirectory: './',                                 // css、js、images等资源打包的路径，默认为static，附图2
    assetsPublicPath: './',                                   // index.html引入资源文件的路径，，附图3


    /**
     * Source Maps
     */

    productionSourceMap: false,                                // 打包后是否生成map文件，项目打包后，代码都是经过压缩加密的，如果因行时报错，无法准确找到错误代码位置，有了map可以像未加密压缩之前快递找到报错位置，附图4
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,                                    // 是否将资源文件压缩打zip包，压缩后的文件会更小，页面的加载速度会更快(优化)，在下面附上配置教程
    productionGzipExtensions: ['js', 'css'],                  // 打包的类型

附图2

附图3
附图4


------- 延 伸 -------

接下来在这里延伸一个配置项讲解

修改了assetsSubDirectory项后，改变了资源文件打包路径

导致css文件里的引用字体报错

解决方法：
打开build/utils.js，搜索if (options.extract)，在‘vue-style-loader’后面添加一行publicPath: ‘…/’，影响dist/css/app***.css引入资源文件的路径


添加后，再次运行npm run build，报错消失

以上是在使用vue过程中的一些配置记录，希望对大家有帮助

外附配置教程
proxyTable api配置教程
productionGzip资源打包配置教程