在vue.config.js中配置
下載 uglifyjs-webpack-plugin 包
?
const { defineConfig } = require("@vue/cli-service");
var path = require("path");module.exports = defineConfig({transpileDependencies: true,filenameHashing: false, // 去除Vue打包后.css和.js文件名稱中8位hash值，跟緩存有關lintOnSave: false, // 設置是否在開發環境下每次保存代碼時都啟用eslint驗證 是否在保存的時候使用 `eslint-loader` 進行檢查。 有效的值：`ture` | `false` | `"error"` 當設置為 `"error"` 時，檢查出的錯誤會觸發編譯失敗。productionSourceMap: false, // 生產環境是否生成 sourceMap 文件 ;false 以加速生產環境構建publicPath: process.env.NODE_ENV === 'production' ? '' : '/', // 部署應用時的根路徑(默認'/'),也可用相對路徑(存在使用限制)outputDir: "dist", // 運行時生成的生產環境構建文件的目錄(默認''dist''，構建之前會被清除)assetsDir: "static", //放置生成的靜態資源(js、css、img、fonts)的(相對于 outputDir 的)目錄(默認'')indexPath: "index.html", //指定生成的 index.html 的輸出路徑(相對于 outputDir)也可以是一個絕對路徑。// 插件// plugins: [],pages: {//pages 里配置的路徑和文件名在你的文檔目錄必須存在 否則啟動服務會報錯index: {//除了 entry 之外都是可選的entry: "src/main.js", // page 的入口,每個“page”應該有一個對應的 JavaScript 入口文件template: "public/index.html", // 模板來源filename: "index.html", // 在 dist/index.html 的輸出title: "項目名稱", // 當使用 title 選項時,在 template 中使用：<title><%= htmlWebpackPlugin.options.title %></title>chunks: ["chunk-vendors", "chunk-common", "index"], // 在這個頁面中包含的塊，默認情況下會包含,提取出來的通用 chunk 和 vendor chunk},},css: {extract: true, // 是否使用css分離插件 ExtractTextPluginsourceMap: false, // 開啟 CSS source mapsloaderOptions: {}// modules: false// 啟用 CSS modules for all css / pre-processor files.},chainWebpack: (config) => {config.resolve.alias.set("@", path.resolve(__dirname, "src"));},configureWebpack: (config) => {// 引入uglifyjs-webpack-pluginconst UglifyPlugin = require('uglifyjs-webpack-plugin');if (process.env.NODE_ENV === 'production') {// 為生產環境修改配置config.mode = 'production'// 將每個依賴包打包成單獨的js文件let optimization = {minimizer: [new UglifyPlugin({uglifyOptions: {warnings: false,compress: {drop_console: true, //生產環境自動刪除consoledrop_debugger: false, //生產環境自動刪除debuggerpure_funcs: ['console.log']}}})]}Object.assign(config, {optimization})} else {// 為開發環境修改配置config.mode = 'development'}},devServer: {// 環境配置host: "localhost",port: 8080,open: true, //配置自動啟動瀏覽器proxy: { // 配置多個代理'/api': {target: 'http://localhost:8080',ws: true,changeOrigin: true,pathRewrite: {'^/api': ''}}}},
});// 啟動儀式
if (process.env.NODE_ENV !== "production") {console.warn(["_ooOoo_"].join("\n"));
}
)
