這篇文章主要講解了Vue CLI4中Vue.config.js如何配置,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
目前創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、南城網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng),共同發(fā)展。
前言:
Vue.js CLI工具 不知不覺發(fā)展到了4.0時(shí)代,CLI給人最直白的感受是沒有了build文件夾跟config文件夾,所有的配置都在Vue.config.js完成。那么該文件的配置至關(guān)重要?,F(xiàn)在我們來看一下最新配置是怎么配置的。
安裝
npm i -d vue-cli-configjs
// vue.config.js const path = require('path'); const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 開啟gzip壓縮, 按需引用 const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 開啟gzip壓縮, 按需寫入 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 打包分析 const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV); const resolve = (dir) => path.join(__dirname, dir); module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/site/vue-demo/' : '/', // 公共路徑 indexPath: 'index.html' , // 相對(duì)于打包路徑index.html的路徑 outputDir: process.env.outputDir || 'dist', // 'dist', 生產(chǎn)環(huán)境構(gòu)建文件的目錄 assetsDir: 'static', // 相對(duì)于outputDir的靜態(tài)資源(js、css、img、fonts)目錄 lintOnSave: false, // 是否在開發(fā)環(huán)境下通過 eslint-loader 在每次保存時(shí) lint 代碼 runtimeCompiler: true, // 是否使用包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本 productionSourceMap: !IS_PROD, // 生產(chǎn)環(huán)境的 source map parallel: require("os").cpus().length > 1, // 是否為 Babel 或 TypeScript 使用 thread-loader。該選項(xiàng)在系統(tǒng)的 CPU 有多于一個(gè)內(nèi)核時(shí)自動(dòng)啟用,僅作用于生產(chǎn)構(gòu)建。 pwa: {}, // 向 PWA 插件傳遞選項(xiàng)。 chainWebpack: config => { config.resolve.symlinks(true); // 修復(fù)熱更新失效 // 如果使用多頁(yè)面打包,使用vue inspect --plugins查看html是否在結(jié)果數(shù)組中 config.plugin("html").tap(args => { // 修復(fù) Lazy loading routes Error args[0].chunksSortMode = "none"; return args; }); config.resolve.alias // 添加別名 .set('@', resolve('src')) .set('@assets', resolve('src/assets')) .set('@components', resolve('src/components')) .set('@views', resolve('src/views')) .set('@store', resolve('src/store')); // 壓縮圖片 // 需要 npm i -D image-webpack-loader config.module .rule("images") .use("image-webpack-loader") .loader("image-webpack-loader") .options({ mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: false }, pngquant: { quality: [0.65, 0.9], speed: 4 }, gifsicle: { interlaced: false }, webp: { quality: 75 } }); // 打包分析, 打包之后自動(dòng)生成一個(gè)名叫report.html文件(可忽視) if (IS_PROD) { config.plugin("webpack-report").use(BundleAnalyzerPlugin, [ { analyzerMode: "static" } ]); } }, configureWebpack: config => { // 開啟 gzip 壓縮 // 需要 npm i -D compression-webpack-plugin const plugins = []; if (IS_PROD) { plugins.push( new CompressionWebpackPlugin({ filename: "[path].gz[query]", algorithm: "gzip", test: productionGzipExtensions, threshold: 10240, minRatio: 0.8 }) ); } config.plugins = [...config.plugins, ...plugins]; }, css: { extract: IS_PROD, requireModuleExtension: false,// 去掉文件名中的 .module loaderOptions: { // 給 less-loader 傳遞 Less.js 相關(guān)選項(xiàng) less: { // `globalVars` 定義全局對(duì)象,可加入全局變量 globalVars: { primary: '#333' } } } }, devServer: { overlay: { // 讓瀏覽器 overlay 同時(shí)顯示警告和錯(cuò)誤 warnings: true, errors: true }, host: "localhost", port: 8080, // 端口號(hào) https: false, // https:{type:Boolean} open: false, //配置自動(dòng)啟動(dòng)瀏覽器 hotOnly: true, // 熱更新 // proxy: 'http://localhost:8080' // 配置跨域處理,只有一個(gè)代理 proxy: { //配置多個(gè)跨域 "/api": { target: "http://172.11.11.11:7071", changeOrigin: true, // ws: true,//websocket支持 secure: false, pathRewrite: { "^/api": "/" } }, "/api2": { target: "http://172.12.12.12:2018", changeOrigin: true, //ws: true,//websocket支持 secure: false, pathRewrite: { "^/api2": "/" } }, } } }
結(jié)語(yǔ)
上述代碼可以直接復(fù)制,也可以按需引入,一般都用的到,注意里面需要安裝的依賴。
cnpm install --save-dev compression-webpack-plugin
cnpm install --save-dev image-webpack-loader
看完上述內(nèi)容,是不是對(duì)Vue CLI4中Vue.config.js如何配置有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
名稱欄目:VueCLI4中Vue.config.js如何配置
文章網(wǎng)址:http://muchs.cn/article18/pisgdp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、小程序開發(fā)、服務(wù)器托管、網(wǎng)站設(shè)計(jì)、ChatGPT、做網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)