Vue.config.js 配置選項

vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那麼它會被 @vue/cli-service 自動加載。你也可以使用 package.json 中的 vue 字段，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。

 

 

// 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` 進行檢查。
    lintOnSave: true,
    //  是否使用帶有瀏覽器內編譯器的完整構建版本
    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: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        // 查閱 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
        proxy: {
            '/api': {
                target: "http://app.rmsdmedia.com",
                changeOrigin: true,
                secure: false,
                pathRewrite: {
                    "^/api": ""
                }
            },
            '/foo': {
                target: '<other_url>'
            }
        }, // string | Object
        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 插件的選項。
    // 查閱 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md
    pwa: {},
    // 三方插件的選項
    pluginOptions: {
        // ...
    }
}