vue.config.js --- vue-cli 4.0配置
阿新 • • 發佈：2022-12-01
// 所有配置請參考 https://cli.vuejs.org/zh/config/ module.exports = { /** * publicPath * hash 模式下可使用 * publicPath: process.env.NODE_ENV === 'development' ? '/' : './', * 部署應用包時的基本 URL。用法和 webpack 本身的 output.publicPath 一致 * 例子：http://localhost:8080/bdsp-page/#/login */ publicPath: '/bdsp-page', // 打包輸出後的資料夾outputDir: 'dist', // 靜態資源存放的目錄，相對於 outputDir 指定的資料夾 assetsDir: 'static', // 指定生成的 index.html 的輸出路徑 (相對於 outputDir)。也可以是一個絕對路徑。 indexPath: './', /* // 在 multi-page 模式下構建應用。每個“page”應該有一個對應的 JavaScript 入口檔案。 // 其值應該是一個物件，物件的 key 是入口的名字，value 是： // 1、一個指定了 entry, template, filename, title 和 chunks 的物件 (除了 entry 之外都是可選的)； // 2、或一個指定其 entry 的字串。 pages: { bdsp: { // page 的入口 entry: 'src/bdsp-page/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/datax.html` // 並且如果找不到的話，就回退到 `public/index.html`。 // 輸出檔名會被推導為 `datax.html`。 datax: 'src/datax/main.js' }*/ /** * lintOnSave * 是否在開發環境下通過 eslint-loader 在每次儲存時 lint 程式碼。 * 這個值會在 @vue/cli-plugin-eslint 被安裝之後生效 * * 值: boolean | 'warning' | 'default' | 'error' * true ｜ 'warning' 會輸出 編譯警告 * 'default' | 'error' 會輸出 編譯錯誤，導致編譯失敗 */ lintOnSave: process.env.NODE_ENV === 'development',// SourceMap 的作用就是能夠讓瀏覽器的除錯面版將生成後的程式碼對映到原始碼檔案當中， // 使開發者可以在原始碼檔案中 debug productionSourceMap: false, /** * configureWebpack: Object | Function * 如果這個值是一個物件，則會通過 webpack-merge 合併到最終的配置中（會合併到webpack配置中）。 * 如果你需要基於環境有條件地配置行為，或者想要直接修改配置，那就換成一個函式 * 該方法的第一個引數會收到已經解析好的配置。 * 在函式內，你可以直接修改配置，或者返回一個將會被合併的物件 * configureWebpack: config => { * if (process.env.NODE_ENV === 'production') { * // 為生產環境修改配置... * } else { * // 為開發環境修改配置... * } * } */ configureWebpack: { // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title. name: name, resolve: { alias: { '@': resolve('src'), '@crud': resolve('src/components/system/Crud') } }, // 警告 webpack 的效能提示 performance: { // hints: 'warning', // // 入口起點的最大體積 整數型別（以位元組為單位） // maxEntrypointSize: 50000000, // // 生成檔案的最大體積 整數型別（以位元組為單位 300k） // maxAssetSize: 30000000 // // 只給出 js 檔案的效能提示 // assetFilter: function(assetFilename) { // return assetFilename.endsWith('.js') // } } }, chainWebpack(config) { config.plugins.delete('preload') // TODO: need test config.plugins.delete('prefetch') // TODO: need test // set svg-sprite-loader config.module .rule('svg') .exclude.add(resolve('src/assets/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/assets/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() // set preserveWhitespace config.module .rule('vue') .use('vue-loader') .loader('vue-loader') .tap(options => { options.compilerOptions.preserveWhitespace = true return options }) .end() config // https://webpack.js.org/configuration/devtool/#development .when(process.env.NODE_ENV === 'development', config => config.devtool('cheap-source-map') ) config .when(process.env.NODE_ENV !== 'development', config => { config .plugin('ScriptExtHtmlWebpackPlugin') .after('html') .use('script-ext-html-webpack-plugin', [{ // `runtime` must same as runtimeChunk name. default is `runtime` inline: /runtime\..*\.js$/ }]) .end() config .optimization.splitChunks({ chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' // only package third parties that are initially dependent }, elementUI: { name: 'chunk-elementUI', // split elementUI into a single package priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm }, commons: { name: 'chunk-commons', test: resolve('src/components'), // can customize your rules minChunks: 3, // minimum common number priority: 5, reuseExistingChunk: true } } }) config.optimization.runtimeChunk('single') } ) }, /** * requireModuleExtension, extract, sourceMap, loaderOptions * css相關配置具體見：https://cli.vuejs.org/zh/config/#css-extract * css: { * // 預設情況下，只有 *.module.[ext] 結尾的檔案才會被視作 CSS Modules 模組。 * // 詳情：https://cli.vuejs.org/zh/guide/css.html#css-modules * requireModuleExtension: true, * * // 向前處理器 Loader 傳遞選項 * // 更多詳情：https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9 * loaderOptions: { * css: { * // 這裡的選項會傳遞給 css-loader * }, * postcss: { * // 這裡的選項會傳遞給 postcss-loader * } * } * } */ /** * devServer * 所有 webpack-dev-server 的選項都支援 * 詳情：https://webpack.docschina.org/configuration/dev-server/ * 注意： * 1、有些值像 host、port 和 https 可能會被命令列引數覆寫。 * 2、有些值像 publicPath 和 historyApiFallback 不應該被修改，因為它們需要和開發伺服器的 publicPath 同步以保障正常的工作。 */ devServer: { // 指定監聽請求的埠號，自動使用可以設定為 'auto' port: port, // 啟動完畢後，自動開啟在瀏覽器上 open: false, // overlay: true 當出現編譯錯誤或警告時，在瀏覽器中顯示全屏覆蓋。 // 當前配置表示，只顯示錯誤，不顯示警告 overlay: { warnings: false, errors: true }, /** * proxy：請求代理 * 值： * 1、String * 例：proxy: 'http://localhost:4000' * 這會告訴開發伺服器將任何未知請求 (沒有匹配到靜態檔案的請求) 代理到 http://localhost:4000 * 2、Object * 完整的選項可以查閱 https://github.com/chimurai/http-proxy-middleware#proxycontext-config */ proxy: { // 如果檢測到以 /api 開頭的請求，則會開啟代理 '/api': { // 轉換為 真實的 請求地址 target: process.env.VUE_APP_BASE_API, // 是否跨域：true 是；false 否 changeOrigin: true, // 將 第一個 /api 改為 api ，可以改任意值 pathRewrite: { '^/api': 'api' } } /** * 例： 請求路徑為 /api/login，真實地址為 http://localhost:8080/ * 使用代理： * '/api': { * target: 'http://localhost:8080/', * changeOrigin: false, * pathRewrite: { * '^/api': '' * } * } * 經過代理以後的請求地址：http://localhost:8080/login * * 注意： * 如果使用了請求攔截器，並設定了統一的請求頭， * 則代理收到的是 攔截過後 的請求路徑，即 請求頭+請求路徑 */ } }, transpileDependencies: [ 'vue-echarts', 'resize-detector' ] }