如何在生产模式下构建 Ionic 应用程序，Ionic 构建的行为不同
Posted
技术标签:
【中文标题】如何在生产模式下构建 Ionic 应用程序，Ionic 构建的行为不同【英文标题】：How to build an Ionic application in Production mode, Ionic build is behaving differently 【发布时间】：2019-01-07 12:29:48 【问题描述】：我正在构建用于生产的 Ionic 应用程序。为此，我使用ionic build --prod 命令并且应用程序正在成功构建，但是当我在服务器上运行我的应用程序时，它给了我以下错误：
cordova.js、main.js、Vendor.js。
（请忽略Firebase的错误）
网络标签截图为：
当我看到我的构建文件夹时，运行上述 ionic 命令后仅生成两个文件，即 Pollyfills.js 和 'sw-toolbox.js'。
但是当我使用Ionic serve 命令时，构建文件夹包含所有文件，即Pollyfills.js、main.js、main.css、vendor.js 和'sw-toolbox.js'。
我已经尝试过各种命令，例如：
ionic cordova build android --prod --release 但它也导致 Build 文件夹中只有两个文件，因此在控制台上出现错误。
有什么问题以及如何使此应用适合生产模式。
请查看我的 index.html 文件，其中我提供了各种 js 文件的路径：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>BOS</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#000">
<!--Share this Code -->
<script src="//platform-api.sharethis.com/js/sharethis.js#property=5b1fb235e4b7fb00118c596f&product=sticky-share-buttons"></script>
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href= "assets/imgs/logoSplash.png",>
<link rel="apple-touch-startup-image" href="assets/imgs/logoSplash.png">
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<!-- cordova.js required for cordova apps (remove if not needed) -->
<script src="cordova.js"></script>
<script>
if ('serviceWorker' in navigator)
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
</script>
<link rel="preload" href="build/main.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<noscript>
<h3 style="color: #673ab7; font-family: Helvetica; margin: 2rem;">
Sorry, but app is not available without javascript
</h3>
</noscript>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
【问题讨论】：
你在构建移动应用吗？ 是的，我正在为 Android 和 Iphone 构建一个混合应用程序 您能否添加该控制台错误日志，以便我们了解发生了什么问题？ 我添加了控制台错误日志的图片，请看一下。 打开网络标签并查看这些脚本的响应正文 【参考方案1】：我找到了我的问题的解决方案。我去了 node_modules -> @ionic -> app-scripts -> config -> webpack.config
在那个文件中，我注释了一行代码：
function getProdLoaders()
if (process.env.IONIC_OPTIMIZE_JS === 'true')
// 返回优化的ProdLoaders;
return devConfig.module.loaders;
现在，它正在工作。
【讨论】：
如果您使用该命令会怎样。set IONIC_OPTIMIZE_JS=false ionic build --prod (windows), IONIC_OPTIMIZE_JS=false ionic build --prod (mac, linux)。这样一个新的 npm 我不会破坏你的解决方案。以上是关于如何在生产模式下构建 Ionic 应用程序，Ionic 构建的行为不同的主要内容，如果未能解决你的问题，请参考以下文章