代码之家 › 专栏 › 技术社区 › N Sharma

如何在生产模式中构建离子应用程序,离子构建的行为是不同的

ionic3 build ionic-framework angular javascript

8

N Sharma · 技术社区 · 7 年前

我正在建立我的生产离子应用程序。为此,我使用 ionic build --prod 命令和应用程序正在成功生成,但当我在服务器上运行应用程序时,它会给我以下错误:

cordova.js , main.js , Vendor.js .

(请忽略Firebase的错误)

网络标签截图为:

当我看到我的build文件夹时,只有两个文件是在运行上面的ionic命令后生成的,即 Pollyfills.js 和“sw toolbox.js”。

但是当我使用 Ionic serve 命令,则生成文件夹包含所有文件,即 Pollyfills.js公司 , 主.js , main.css , vendor.js 和“sw toolbox.js”。

我已经试过各种命令,比如:

ionic cordova build android --prod --release 但它也只会导致生成文件夹中的两个文件,从而在控制台上出现错误。

有什么问题,我如何才能使这个应用程序适合生产模式。

请查看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>

1 回复 | 直到 7 年前

1

2

N Sharma 7 年前

我找到了解决问题的办法。我转到了节点模块->@ionic->应用程序脚本->配置->webpack.config

在那个文件中,我注释了一行代码:

function getProdLoaders() {
  if (process.env.IONIC_OPTIMIZE_JS === 'true') {

//return optimizedProdLoaders;<=这个

  }
  return devConfig.module.loaders;
}

现在,它开始工作了。