vue-cli3.x之入坑記錄-vue.config.js配置

 vue.config.js-詳細配置 

參考連結:https://segmentfault.com/a/1190000018037214?utm_source=tag-newest

module.exports = {
    // 項目部署的基礎路徑

    // 我們預設假設你的應用将會部署在域名的根部，
    // 比如 https://www.my-app.com/
    // 如果你的應用時部署在一個子路徑下，那麼你需要在這裡指定子路徑。
    // 比如，如果你的應用部署在
    // https://www.foobar.com/my-app/
    // 那麼将這個值改為 `/my-app/`

    // 注意:v-cli3.x以上将baseUrl替換為publicPath
    // baseUrl: '/',
    publicPath: './',

    // 将建構好的檔案輸出到哪裡
    outputDir: 'dist',

    // 放置靜态資源的地方 (js/css/img/font/...)
    assetsDir: 'static',

    // 用于多頁配置，預設是 undefined
    pages: {
        index: {
            // 入口檔案
            entry: 'src/index/main.js',
            // 模闆檔案
            template: 'public/index.html',
            // 輸出檔案
            filename: 'index.html',
            // 頁面title
            title: 'Index Page'
        },
        // 簡寫格式
        // 模闆檔案預設是 `public/subpage.html`
        // 如果不存在，就是 `public/index.html`.
        // 輸出檔案預設是 `subpage.html`.
        subpage: 'src/subpage/main.js'
    },

    // 是否在儲存的時候使用 `eslint-loader` 進行檢查。
    // 有效的值：`ture` | `false` | `"error"`
    // 當設定為 `"error"` 時，檢查出的錯誤會觸發編譯失敗。
    lintOnSave: true,

    // 使用帶有浏覽器内編譯器的完整建構版本
    // 查閱 https://cn.vuejs.org/v2/guide/installation.html#運作時-編譯器-vs-隻包含運作時
    runtimeCompiler: false,

    // babel-loader 預設會跳過 node_modules 依賴。
    // 通過這個選項可以顯式轉譯一個依賴。
    transpileDependencies: [/* string or regex */],

    // 是否為生産環境建構生成 source map？false将提高建構速度
    productionSourceMap: true,

    // 調整内部的 webpack 配置。
    // 查閱 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/webpack.md
    chainWebpack: () => {},
    configureWebpack: () => {},

    // CSS 相關選項
    css: {
        // 将元件内的 CSS 提取到一個單獨的 CSS 檔案 (隻用在生産環境中)
        // 也可以是一個傳遞給 `extract-text-webpack-plugin` 的選項對象
        extract: true,

        // 是否開啟 CSS source map？
        sourceMap: false,

        // 為預處理器的 loader 傳遞自定義選項。比如傳遞給
        // sass-loader 時，使用 `{ sass: { ... } }`。
        loaderOptions: {},

        // 為所有的 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: {},

    // 配置 webpack-dev-server 行為。
    devServer: {
        open: true,//配置自動啟動浏覽器.另選項process.platform === 'darwin'
        host: '0.0.0.0',//自定義位址
        port: 8080,//自定義設定Network路徑
        https: false,
        hotOnly: false,
        // 查閱 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
        // 跨域配置
        proxy: {
            '/':{
                target:'http://xxxxx:xxxx/',
                changeOrigin:true,
                ws:true,
                pathRewrite:{
                    '^/':''
                }
            }
        },
        before: app => {}
    },

    // 三方插件的選項
    pluginOptions: {
        // ...
    }
}
           

vue.config.js-簡單配置 (個人項目)

module.exports = {
    publicPath: './',
    outputDir: 'dist',
    assetsDir: 'static',
    lintOnSave: false,
    productionSourceMap: false,
    devServer: {
        proxy: {
            '/':{
                target:'http://xxxx:xxxx/',
                changeOrigin:true,
                ws:true,
                pathRewrite:{
                    '^/':''
                }
            }
        }
    }
};
           

跨域問題----注意事項:配置完後重新開機項目

devServer: {
        //這個配置完之後,記得重新開機項目
        proxy: {
            '/':{
                target:'http://xxxx:xxxx/',
                changeOrigin:true,
                ws:true,
                pathRewrite:{
                    '^/':''
                }
            }
        }
    }
           

歡迎各路大神指點~謝謝觀看