美文网首页Vue.js
vue-cli4中vue-config.js配置选项

vue-cli4中vue-config.js配置选项

作者: 怦然心动_a40c | 来源:发表于2020-06-30 21:25 被阅读0次
    module.exports = {
        // 部署应用时的基本 URL
        publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
        // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
        outputDir: 'dist',
        // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
        assetsDir: '',
        // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
        indexPath: 'index.html',
        // 默认在生成的静态资源文件名中包含hash以控制缓存
        filenameHashing: true,
        // 构建多页面应用,页面的配置
        pages: {
            index: {
                // page 的入口
                entry: 'src/main.js',
                // 模板来源
                template: 'public/index.html',
                // 在 dist/index.html 的输出
                filename: 'index.html',
                // 当使用 title 选项时,template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
                title: 'Index Page',
                // 在这个页面中包含的块,默认情况下会包含
                // 提取出来的通用 chunk 和 vendor chunk。
                chunks: ['chunk-vendors', 'chunk-common', 'index']
            },
            // 当使用只有入口的字符串格式时,模板会被推导为 `public/subpage.html`,并且如果找不到的话,就回退到 `public/index.html`。
            // 输出文件名会被推导为 `subpage.html`。
            subpage: 'src/main.js'
        },
        // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 (在生产构建时禁用 eslint-loader)
        lintOnSave: process.env.NODE_ENV !== 'production',
        // 是否使用包含运行时编译器的 Vue 构建版本
        runtimeCompiler: false,
        // Babel 显式转译列表
        transpileDependencies: [],
        // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建
        productionSourceMap: true,
        // 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性(注:仅影响构建时注入的标签)
    
        crossorigin: '',
        // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)
        integrity: false,
        // 如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中
        // 如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,你可以直接修改配置,或者返回一个将会被合并的对象
        configureWebpack: {},
        // 对内部的 webpack 配置(比如修改、增加Loader选项)(链式操作)
       lintOnSave: true, // 是否开启eslint保存检测
       productionSourceMap: false, // 是否在构建生产包时生成sourcdeMap
       chainWebpack: () => { }
        // css的处理
       css: {
        loaderOptions: {
        css: {},
        postcss: {
            plugins: [
            require('postcss-px2rem')({
                remUnit: 37.5
            })
            ]
            }
        },
        // 所有 webpack-dev-server 的选项都支持
        devServer: {
        // host: "localhost",
        /* 本地ip地址 */
        //host: "192.168.0.131",
        host: "0.0.0.0", //局域网和本地访问
        port: "8080",
        hot: true,
        /* 自动打开浏览器 */
        open: false,
        overlay: {
          warning: false,
          error: true
        },
        /* 跨域代理 */
        proxy: {
          "/api": {
            /* 目标代理服务器地址 */
            target: "http://xxxx.top", //
            // target: "http://192.168.0.201:8089", //
            /* 允许跨域 */
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              "^/api": ""
            }
          }
        }
      }
        // 是否为 Babel 或 TypeScript 使用 thread-loader
        parallel: require('os').cpus().length > 1,
        // 向 PWA 插件传递选项
        pwa: {},
        // 可以用来传递任何第三方插件选项
        pluginOptions: {}
    }
    
    

    相关文章

      网友评论

        本文标题:vue-cli4中vue-config.js配置选项

        本文链接:https://www.haomeiwen.com/subject/meggzhtx.html