• vue vue-cli3打包配置

    发表于 2020-10-27 10:56浏览112 • 评论0条 • 0人点赞 • 0人收藏

    10月

    27

    技术分享

    1、根目录下创建vue.config.js

    2、vue.config.js添加打包配置代码

         
    /**
     * *@2018-09-13
     * *@author 升哥博客
     * *@description vue-cli 3.x配置文件
     */
    const path = require('path')
    const vConsolePlugin = require('vconsole-webpack-plugin')// 引入 移动端模拟开发者工具 插件 (另:https://github.com/liriliri/eruda)
    const CompressionPlugin = require('compression-webpack-plugin') // Gzip
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin // Webpack包文件分析器
    const baseUrl = process.env.NODE_ENV === 'production' ? '//www.cpsblog.cn/compiledFile/' : './' // 不同环境切换控制
    
    function resolve (dir) {
      return path.join(__dirname, dir)
    }
    
    module.exports = {
      // 基本路径
      publicPath: baseUrl,
      // 输出文件目录
      outputDir: 'compiledFile',
      // eslint-loader 是否在保存的时候检查
      lintOnSave: true,
      // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
      assetsDir: 'static',
      // 以多页模式构建应用程序。
      pages: undefined,
      // 是否使用包含运行时编译器的 Vue 构建版本
      runtimeCompiler: false,
      // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建,在适当的时候开启几个子进程去并发的执行压缩
      parallel: require('os').cpus().length > 1,
      // 生产环境是否生成 sourceMap 文件,一般情况不建议打开
      productionSourceMap: false,
      // webpack配置
      // 对内部的 webpack 配置进行修改
      chainWebpack: config => {
        config.resolve.alias.set('public', resolve('public'))
        config.resolve.alias.set('@', resolve('src'))
        config.plugins.delete('preload')
        config.plugins.delete('prefetch')
      },
      // 调整 webpack 配置
      configureWebpack: config => {
        // 生产and测试环境
        let pluginsPro = [
          new CompressionPlugin({ // 文件开启Gzip,也可以通过服务端
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
            threshold: 8192,
            minRatio: 0.8
          }),
          new BundleAnalyzerPlugin()
        ]
        // 开发环境
        let pluginsDev = [
          // 移动端模拟开发者工具
          new vConsolePlugin({
            filter: [], // 需要过滤的入口文件
            enable: false // 发布代码前记得改回 false
          })
        ]
        if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
          config.plugins = [...config.plugins, ...pluginsPro]
        } else {
          // 为开发环境修改配置...
          config.plugins = [...config.plugins, ...pluginsDev]
        }
      },
      css: {
        // 启用 CSS modules
        modules: false,
        // 是否使用css分离插件
        extract: true,
        // 开启 CSS source maps,一般不建议开启
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {}
        },
      // 跨域代理配置
      devServer: {
        // host: 'localhost',
        host: '0.0.0.0',
        port: 8000, // 端口号
        https: false, // https:{type:Boolean}
             open: false, // 配置自动启动浏览器
        hotOnly: true, // 热更新
        proxy: {
          '/api': {
            // 目标 API 地址
            target: 'http://www.cpsblog.cn/',
            ws: true,
            // 将主机标头的原点更改为目标URL
            changeOrigin: true,
            pathRewrite: {
              '^/api': 'http://www.cpsblog.cn/'
            }
          }
        }
      },
      pluginOptions: {}
    }
    
        
    

评论列表(有0条评论)

  • cpsblog
  • Do you like me?

  • 热门文章
  • 推荐文章
  • 最新文章