Vue前端vue.config.js簡介
vue.config.js
vue項目的配置文件,需要嚴格遵照 JSON 的格式來寫。結構如下:
module.exports = { // 選項... }
publicPath
部署應用包時的基本 URL。例如 https://www.my-app.com/,則publicPath
則為“/”,如果應用被部署在 https://www.my-app.com/my-app/,則設置 publicPath 為 /my-app/。
outputDir
當運行 vue-cli-service build 時生成的生產環境構建文件的目錄。註意目標目錄的內容在構建之前會被清除 (構建時傳入 –no-clean 可關閉該行為)。
assetsDir
放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄。
devServer
在開發環境下API 請求的代理到 API 服務器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。生產環境一般由Nginx負責。
process.env.VUE_APP_BASE_API
由於我們的項目需要在不同環境下進行運行(開發,生產,測試等),這避免我們需要多次的去切換請求的地址以及相關的配置,vue-cli2是可以直接在config文件中進行配置的,但是vue-cli4和vue-cli3已經簡化瞭,沒有config文件怎麼辦?
建立.env系列文件
首先我們在根目錄新建3個文件,分別為.env.development,.env.production,.env.test
註意文件是隻有後綴的。
.env.development 模式用於serve,開發環境,就是開始環境的時候會引用這個文件裡面的配置
.env.production模式用於build,線上環境。
.env.test 測試環境
PS:vue.config.js詳解
vue.config.js 是一個可選的配置文件,如果項目的 (和 package.json 同級的) 根目錄中存在這個文件,那麼它會被 @vue/cli-service 自動加載。你也可以使用 package.json 中的 vue 字段,但是註意這種寫法需要你嚴格遵照 JSON 的格式來寫。
這個文件應該導出一個包含瞭選項的對象:
// vue.config.js module.exports = { //默認情況下,Vue CLI 會假設你的應用是被部署在一個域名的根路徑上,例如 https://www.my-app.com/。如果應用被部署在一個子路徑上,你就需要用這個選項指定這個子路徑。例如,如果你的應用被部署在 https://www.my-app.com/my-app/,則設置 publicPath 為 /my-app/。 //這個值也可以被設置為空字符串 ('') 或是相對路徑 ('./') publicPath: './', outputDir:"dist",//當運行 vue-cli-service build 時生成的生產環境構建文件的目錄名字 默認為"dist" assetsDir: './static',//當運行 vue-cli-service build 時生成的生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄 默認為"",默認與生成的index.html同級 indexPath:"index.html",//npm run build之後生成的入口文件 默認為index.html,此屬性可以省略,省略瞭默認就是index.html filenameHashing:true,//默認情況下,生成的靜態資源在它們的文件名中包含瞭 hash 以便更好的控制緩存。然而,這也要求 index 的 HTML 是被 Vue CLI 自動生成的。如果你無法使用 Vue CLI 生成的 index HTML,你可以通過將這個選項設為 false 來關閉文件名哈希。 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' }, //lintOnSave: //1.是否在開發環境下通過 eslint-loader 在每次保存時 lint 代碼。這個值會在 @vue/cli-plugin-eslint 被安裝之後生效。 //2.設置為 true 時,eslint-loader 會將 lint 錯誤輸出為編譯警告。默認情況下,警告僅僅會被輸出到命令行,且不會使得編譯失敗。 //3.如果你希望讓 lint 錯誤在開發時直接顯示在瀏覽器中,你可以使用 lintOnSave: 'error'。這會強制 eslint-loader 將 lint 錯誤輸出為編譯錯誤,同時也意味著 lint 錯誤將會導致編譯失敗。 //4.或者,你也可以通過設置讓瀏覽器 overlay 同時顯示警告和錯誤: //module.exports = { //devServer: { //overlay: { // warnings: true, // errors: true //} //} //} lintOnSave:true, runtimeCompiler:false,//是否使用包含運行時編譯器的 Vue 構建版本。設置為 true 後你就可以在 Vue 組件中使用 template 選項瞭,但是這會讓你的應用額外增加 10kb 左右。 transpileDependencies:[],//默認情況下 babel-loader 會忽略所有 node_modules 中的文件。如果你想要通過 Babel 顯式轉譯一個依賴,可以在這個選項中列出來。 productionSourceMap:true,//如果你不需要生產環境的 source map,可以將其設置為 false 以加速生產環境構建 這玩意設置成false之後,能把打包後的文件大小減小80% 當時我的項目大小是8m+ 設成false之後變成瞭2m+ productionSourceMap:false,之後,就不會生成map文件,map文件的作用在於:項目打包後,代碼都是經過壓縮加密的,如果運行時報錯,輸出的錯誤信息無法準確得知是哪裡的代碼報錯。也就是說map文件相當於是查看源碼的一個東西。如果不需要定位問題,並且不想被看到源碼,就把productionSourceMap 置為false,既可以減少包大小,也可以加密源碼。 crossorigin:"undefined",//設置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標簽的 crossorigin 屬性。需要註意的是該選項僅影響由 html-webpack-plugin 在構建時註入的標簽 - 直接寫在模版 (public/index.html) 中的標簽不受影響。 integrity:false,//在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標簽上啟用 Subresource Integrity (SRI)。如果你構建後的文件是部署在 CDN 上的,啟用該選項可以提供額外的安全性。需要註意的是該選項僅影響由 html-webpack-plugin 在構建時註入的標簽 - 直接寫在模版 (public/index.html) 中的標簽不受影響。另外,當啟用 SRI 時,preload resource hints 會被禁用,因為 Chrome 的一個 bug 會導致文件被下載兩次。 configureWebpack:Object | Function,//下面舉個例子: configureWebpack: config => { if (process.env.NODE_ENV === "production") { // 為生產環境修改配置... config.mode = "production"; // 這裡修改下 config.optimization.minimizer = [ new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_console: true, //console drop_debugger: true, pure_funcs: ['console.log'] //移除console } } }) ] //打包文件大小配置 config["performance"] = { "maxEntrypointSize":10000000, "maxAssetSize":30000000 } } else { // 為開發環境修改配置... config.mode = "development"; } }, //上面是統一使用configureWebpack的函數模式,然後函數模式裡面默認會有一個config參數,需要增加或者修改configureWebpack對應的參數,就直接使用config去修改就可以瞭! //我這裡使用瞭兩個功能,第一個是打包build的時候去掉console的調試信息,第二個就是修改打包靜態資源文件大小設置的配置 chainWebpack:function,//是一個函數,會接收一個基於 webpack-chain 的 ChainableConfig 實例。允許對內部的 webpack 配置進行更細粒度的修改。下面舉個例子 chainWebpack: config => { config.resolve.alias .set('@', resolve('src'))//設置@快捷到src目錄 .set('view', resolve('src/view'))//設置view快捷指定到src/view目錄 .set('$css',resolve('/static/css')) .set('$common',resolve('/components')) .set('$api',resolve('/api')) .set('$page',resolve('/pages')) .set('$js',resolve('/static/js')); // 刪除預加載 config.plugins.delete('preload') config.plugins.delete('prefetch') // 壓縮代碼 config.optimization.minimize(true) // 分割代碼 config.optimization.splitChunks({ chunks: 'all' }) }, css:{ modules:false,//默認情況下,隻有 *.module.[ext] 結尾的文件才會被視作 CSS Modules 模塊。設置為 true 後你就可以去掉文件名中的 .module 並將所有的 *.(css|scss|sass|less|styl(us)?) 文件視為 CSS Modules 模塊。 extract:true,//Default: 生產環境下是 true,開發環境下是 false 是否將組件中的 CSS 提取至一個獨立的 CSS 文件中 (而不是動態註入到 JavaScript 中的 inline 代碼)。 sourceMap:false,//是否為 CSS 開啟 source map。設置為 true 之後可能會影響構建的性能。 loaderOptions:{},//向 CSS 相關的 loader 傳遞選項。例如: }, devServer:{ proxy:'http://localhost:8080',//如果你的前端應用和後端 API 服務器沒有運行在同一個主機上,你需要在開發環境下將 API 請求代理到 API 服務器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。http://localhost:8080這會告訴開發服務器將任何未知請求 (沒有匹配到靜態文件的請求) 代理到http://localhost:4000 如果你想要更多的代理控制行為,也可以使用一個 path: options 成對的對象。完整的選項可以查閱 http-proxy-middleware 。 proxy: { '/rng': { target: '<url>',// 後臺接口域名 secure: false, // 如果是https接口,需要配置這個參數 ws: true,//如果要代理 websockets,配置這個參數 changeOrigin: true//是否跨域 //我的 api='/rng'我的請求地址 ${api}/xxxx/xxx ,請求地址就為 '/rng/xxxx/xxx'當node服務器 遇到 以 '/rng' 開頭的請求,就會把 target 字段加上,那麼我的請求地址就為 http://45.105.124.130:8081/rng/xxxx/xxx }, '/foo': { target: '<other_url>' } } }, parallel:'boolean',//是否為 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多於一個內核時自動啟用,僅作用於生產構建。 pluginOptions:{ //less全局變量引用 'style-resources-loader': { preProcessor: 'less', patterns: [ path.resolve(__dirname, './src/assets/varibles.less'), ] } }, },
到此這篇關於VUE前端vue.config.js簡介的文章就介紹到這瞭,更多相關vue.config.js簡介內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- webpack5之devServer的常用配置詳解
- webpack5之output和devServer的publicPath區別示例詳解
- vue2之vue.config.js最全配置教程
- Vue包大小優化的實現(從1.72M到94K)
- vue單頁面改造多頁面應用詳解第1/2頁