vue.config.js 打包配置的一些东西

1、打包后的文件和路径在哪里看

在控制台 element和sources里看
我们自己公司是这样的
控制台这个 sources 可以看到资源目录。如下图所示
这些资源都相当于在线资源了，可通过右击在新标签页打开（如下图所示）。
这里的liangwei相当于dist目录。然后再去找liangwei下的static等资源文件。
在element可以发现，这个红框的就是自己写的js代码，因为有static目录。
有static的就是自己的东西打包的,其他的则是在线的或者自带的css/js。

打包的配置

publicPath（Type: string，Default: ‘/’）

这个值也可以被设置为空字符串 (’’) 或是相对路径 (’./’)，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。

outputDir（Type: string，Default: ‘dist’）

输出文件目录，当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 。

assetsDir（Type: string，Default: ‘’）

放置生成的静态资源 (js、css、img、fonts) 的目录。

打包后的文件目录如下图所示

static和index.html同级，如上图所示

lintOnSave（Type: boolean | ‘error’，Default: true）

是否在保存的时候使用eslint-loader进行检查。 有效的值：ture | false | error 当设置为 error 时，检查出的错误会触发编译失败。一般设置为false。

productionSourceMap（Type: boolean，Default: true）

如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。（提供 Sourcemap 相当于暴露了一部分源码，所以一般关掉）

transpileDependencies（Type: Array<string | RegExp>，Default: []）

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。

devServer

devServer.port(端口号，默认为8080）
devServer.open(使用默认浏览器打开项目）
devServer.overlay
（警告时刷新，错误时不刷新）

overlay: {
     warnings: false,
     errors: true
},

devServer.proxy(代理）

devServer:{
    host: 'localhost',//target host
    port: 8080,
    //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target+/api
    proxy:{
        '/api':{
            target: 'http://192.168.1.30:8085',//代理地址，这里设置的地址会代替axios中设置的baseURL
            changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
            pathRewrite: {
                '^/api': '/' 
                //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
                //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
           }
    }}
},

 // 例如将'localhost:8080/api/xxx'代理到'https://wangyaxing.cn/api/xxx'
        '/api': {
            target: 'https://wangyaxing.cn', // 接口的域名
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        },
        // 例如将'localhost:8080/img/xxx'代理到'https://cdn.wangyaxing.cn/xxx'
        '/img': {
            target: 'https://cdn.wangyaxing.cn', // 接口的域名
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
            pathRewrite: {'^/img': ''}  // pathRewrite 来重写地址，将前缀 '/api' 转为 '/'。
        }

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      [process.env.VUE_APP_BASE_API2]: {
        target: `http://10.10.1.153:8081/`,
        changeOrigin: true,
        // ws: true, // 是否代理websockets
        // pathRewrite: {
        //   ['^' + process.env.VUE_APP_BASE_API]: ''
        // }
      },
    },
    // before: require('./mock/mock-server.js')
  },
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    //关闭 webpack 的性能提示
   // performance: {
    //  hints: false
   // },
    //或者
    //警告 webpack 的性能提示
    performance: {
      hints: 'warning',
      //入口起点的最大体积
      maxEntrypointSize: 50000000,
      //生成文件的最大体积
      maxAssetSize: 30000000,
      //只给出 js 文件的性能提示
      assetFilter: function (assetFilename) {
        return assetFilename.endsWith('.js');
      }
    }
  },
 }

打包后的js代码添加时间戳 就不用每次清理浏览器缓存

const Timestamp=new Date().getTime();
    output: {
      sourcePrefix: ' ',
      filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
      chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
       // 1
    },

例如：

打包放到线上的东西就是这样