vue cli3專案優化

做公司後台，使用了vue-cli3和heyui做為基礎搭建。

對專案做過的優化記錄如下：

a.配置多變數環境

通過在package.json 裡的scripts配置項中新增--mode ***來選擇不同的環境。

**中可以通過process.env.node_env變數來訪問。

b.專案新建vue.config.js，其中可以載入元件中介軟體來達到優化專案目的。

1.配置 proxy **解決跨域問題

假設介面為：

module.exports = ,
// open: false, // 是否開啟瀏覽器
// host: "localhost",
// port: "8080", // **斷就
// hotonly: false, // 熱更新
proxy: }}
}};​

module.exports = 

};

const path = require("path");

const resolve = dir => path.join(__dirname, dir);
module.exports = 
}

npm i -d image-webpack-loader

module.exports = ,

optipng: ,
pngquant: ,
gifsicle: 
// webp: 
});}
}};

const bundleanalyzerplugin = require("webpack-bundle-analyzer")

.bundleanalyzerplugin;
module.exports = 
]);}
}};

module.exports = ;

},chainwebpack: config => ;
// 如果使用多頁面打包，使用vue inspect --plugins檢視html是否在結果陣列中
config.plugin("html").tap(args => );
}};

npm i -d compression-webpack-plugin

const compressionwebpackplugin = require("compression-webpack-plugin");

const is_prod = ["production", "prod"].includes(process.env.node_env);
const productiongzipextensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = ));}
config.plugins = [...config.plugins, ...plugins];
}};

Vue cli3 專案優化

vue 專案完成後，因匯入了大量的或體積較大的依賴包以及外掛程式，導致專案變得非常臃腫。下面通過幾個方面來優化頁面的使用者體驗以及提公升頁面的響應速度。在專案中安裝使用nprogress依賴項，使使用者獲得更好的使用者體驗。使用後會在頁面載入時出現頁面頂部的進度條。效果如下 匯入 nprogress...

Vue Cli3專案配置

二 全域性sass配置 三 全域性css配置 四 基礎元件的自動化全域性註冊總結 使用vue cli3構建乙個初始的vue專案 cli3官方文件 1 在 vue.config.js 裡面頂部 路徑依賴 const path require path 查詢檔案方法 const resolve dir ...

Vue cli3專案建立

ps 如果之前安裝有cli2需要先解除安裝cli2才能安裝cli3 cli4 準備工作 檢視當前版本 vue v 或者 vue version1 安裝 解除安裝 cli2 全域性安裝 npm install vue cli g 全域性解除安裝 npm uninstall vue cli g cli3...