1. 程式人生 > 其它 >Vue中vue.config的配置

Vue中vue.config的配置

vue config 命令用來審查或修改全域性的 CLI 配置。

vue-cli 3.x 腳手架搭建完成後,專案目錄中沒有vue.config.js檔案,需要手動在根目錄中建立 vue.config.js。

vue.config.js 是一個可選的配置檔案,如果專案的 (和 package.json 同級的) 根目錄中存在這個檔案,那麼它會被 @vue/cli-service 自動載入。

你也可以使用 package.json 中的 vue 欄位,但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。

關於Vue 配置config 檔案詳解
vue.config的一些配置

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: {

    // ...

}