【vue前端】vue.config.js 配置选项

【vue前端】vue.config.js 配置选项

// Vue.config.js 配置选项

module.exports = {
    // 选项

    // 基本路径
    publicPath: "./",

    // 构建时的输出目录
    outputDir: "dist",

    // 放置静态资源的目录
    assetsDir: "static",

    // html 的输出路径
    indexPath: "index.html",

    // 是否开启文件名哈希
    filenameHashing: true,

    // 用于多页配置，默认是 undefined
    pages: {
        index: {
            // page 的入口文件
            entry: 'src/index/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/subpage/main.js'
    },

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

    //  是否使用带有浏览器内编译器的完整构建版本，设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让应用额外增加 10kb 左右。
    runtimeCompiler: false,

    //  babel-loader 默认会跳过 node_modules 依赖。
    transpileDependencies: [ /* string or regex */ ],

    //  是否为生产环境构建生成 source map
    productionSourceMap: true,

    //  设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
    crossorigin: "",

    //  在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。
    integrity: false,

    //  调整内部的 webpack 配置
    configureWebpack: () => {}, //(Object | Function)
    chainWebpack: () => {},

    // 配置 webpack-dev-server 行为。
    devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
        
        // 配置代理服务器
        proxy: {
        	'/api': {
                target: 'http://ip:port',  // 请求的第三方接口
                secure: false,   //如果是http接口，需要配置该参数
                ws: true,  // proxy websockets，访问网关，使用http的连接方式进行socket信息推送
                changeOrigin: true,  // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite: {  // 路径重写，
                    '^/api': ''  // 替换target中的请求地址，也就是说以后你在请求http://ip:port这个地址的时候直接写成/api即可。
                }
            }
        },

        before: app => {}
    },

    // CSS 相关选项
    css: {

        // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)，也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
        extract: true,

        // 是否开启 CSS source map？
        sourceMap: false,

        // 为预处理器的 loader 传递自定义选项。比如传递给Css-loader 时，使用 `{ Css: { ... } }`。
        loaderOptions: {
            css: {
                // 这里的选项会传递给 css-loader
            },

            postcss: {
                // 这里的选项会传递给 postcss-loader
            }

        },

        // 为所有的 CSS 及其预处理文件开启 CSS Modules，这个选项不会影响 `*.vue` 文件。
        modules: false
    },

    // 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`，在多核机器下会默认开启。
    parallel: require('os').cpus().length > 1,

    // PWA 插件的选项。
    pwa: {},

    // 三方插件的选项
    pluginOptions: {}
}

参考：vue.config.js 配置