Vue 打包配置productionSourceMap 的記錄

1.vue打包的問題

　　一次在兩個電腦中給同一個項目打包，打出來dist文件的不一樣打，一個15.7M ,一個3.7M，同樣的代碼，同樣的命令，為什么打出來的包差別這么大。

查了一下代碼，發現vue.config.js這個文件不同。在create vue的時候，這個文件沒有被創建，需要自己手動添加，內容如下

module.exports = {
    productionSourceMap: false,
}

打包的環境vue  2.6.10

在設置了vue.config.js之后，就不會生成map文件，map文件的作用在於：項目打包后，代碼都是經過壓縮加密的，如果運行時報錯，輸出的錯誤信息無法准確得知是哪里的代碼報錯。也就是說map文件相當於是查看源碼的一個東西。如果不需要定位問題，並且不想被看到源碼，就把productionSourceMap 置為false，既可以減少包大小，也可以加密源碼。

2.打包的配置

　　在vue.config.js文件中還有很多配置可以自由的配置，雖然create vue已經給我們提供了極簡配置，但是想要自由定制，還是需要配合vue.config.js的配置。

//vue.config.js 配置說明
// 這里只列一部分，具體配置慘考文檔啊
module.exports = {
    // baseUrl  type:{string} default:'/' 
    // 將部署應用程序的基本URL
    // 將部署應用程序的基本URL。
    // 默認情況下，Vue CLI假設您的應用程序將部署在域的根目錄下。
    // https://www.my-app.com/。如果應用程序部署在子路徑上，則需要使用此選項指定子路徑。例如，如果您的應用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.

    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',

    // outputDir: 在npm run build時 生成文件的目錄 type:string, default:'dist'

    // outputDir: 'dist',

    // pages:{ type:Object,Default:undfind } 
/*
  構建多頁面模式的應用程序.每個“頁面”都應該有一個相應的JavaScript條目文件。該值應該是一
  個對象，其中鍵是條目的名稱，而該值要么是指定其條目、模板和文件名的對象，要么是指定其條目
  的字符串，
  注意：請保證pages里配置的路徑和文件名 在你的文檔目錄都存在 否則啟動服務會報錯的
*/
    // pages: {
        // index: {
            // entry for the page
            // entry: 'src/index/main.js',
            // the source template
            // template: 'public/index.html',
            // output as dist/index.html
            // filename: 'index.html'
        // },
        // when using the entry-only string format,
        // template is inferred to be `public/subpage.html`
        // and falls back to `public/index.html` if not found.
        // Output filename is inferred to be `subpage.html`.
        // subpage: 'src/subpage/main.js'
    // },

    //   lintOnSave：{ type:Boolean default:true } 問你是否使用eslint
    lintOnSave: true,
    // productionSourceMap：{ type:Bollean,default:true } 生產源映射
    // 如果您不需要生產時的源映射，那么將此設置為false可以加速生產構建
    productionSourceMap: false,
    // devServer:{type:Object} 3個屬性host,port,https
    // 它支持webPack-dev-server的所有選項

    devServer: {
        port: 8085, // 端口號
        host: 'localhost',
        https: false, // https:{type:Boolean}
        open: true, //配置自動啟動瀏覽器
        // proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理
        // proxy: {
        //     '/api': {
        //         target: '<url>',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '/foo': {
        //         target: '<other_url>'
        //     }
        // },  // 配置多個代理
    }
}

官方vue.config.js 參考文檔 https://cli.vuejs.org/zh/config/#css-loaderoptions