【Vue】---Vue.config經常使用配置項

1、前言

　　Vue-cli3 搭建的項目 相比較Vue-cli2界面相對較爲簡潔，以前的build和config文件夾不見了，那麼應該如何配置 如webpack等的配呢？

     

 

 2、基本配置

　　只須要在項目的根目錄下新建 vue.config.js 文件（是根目錄，不是src目錄）

const path = require('path')

module.exports = {
    publicPath: './', // 基本路徑
    outputDir: 'dist', // 輸出文件目錄
    lintOnSave: false, // eslint-loader 是否在保存的時候檢查
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    // webpack配置
    chainWebpack: (config) => {
    },
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 爲生產環境修改配置...
            config.mode = 'production'
        } else {
            // 爲開發環境修改配置...
            config.mode = 'development'
        }
        Object.assign(config, {
            // 開發生產共同配置
            resolve: {
                alias: {
                    '@': path.resolve(__dirname, './src'),
                    '@c': path.resolve(__dirname, './src/components'),
                    '@p': path.resolve(__dirname, './src/pages')
                } // 別名配置
            }
        })
    },
    productionSourceMap: false, // 生產環境是否生成 sourceMap 文件
    // css相關配置
    css: {
        extract: true, // 是否使用css分離插件 ExtractTextPlugin
        sourceMap: false, // 開啓 CSS source maps?
        loaderOptions: {
            css: {}, // 這裏的選項會傳遞給 css-loader
            postcss: {} // 這裏的選項會傳遞給 postcss-loader
        }, // css預設器配置項 詳見https://cli.vuejs.org/zh/config/#css-loaderoptions
        modules: false // 啓用 CSS modules for all css / pre-processor files.
    },
    parallel: require('os').cpus().length > 1, // 是否爲 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多於一個內核時自動啓用，僅做用於生產構建。
    pwa: {}, // PWA 插件相關配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    // webpack-dev-server 相關配置
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0', // 容許外部ip訪問
        port: 8022, // 端口
        https: false, // 啓用https
        overlay: {
            warnings: true,
            errors: true
        }, // 錯誤、警告在頁面彈出
        proxy: {
            '/api': {
                target: 'http://www.baidu.com/api',
                changeOrigin: true, // 容許websockets跨域
                // ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        } // 代理轉發配置，用於調試環境
    },
    // 第三方插件配置
    pluginOptions: {}
}