Vue + ElementUI 26プロジェクト最適化のeコマース管理システムの例-ホームページのコンテンツのカスタマイズ

プロジェクト最適化戦略

7.ホームページのコンテンツをカスタマイズする

異なるパッケージ環境では、ホームページのコンテンツが異なる場合があります。タイミングにはプラグイン方式を使用できます。プラグイン構成は次のとおりです。

chainWebpack：config => { 
  config.when（process.env.NODE_ENV === 'production'、config => { 
    config.plugin（ 'html'）。tap（args => { 
      args [ 0] .isProd = true 
      return args 
    }）
  }）
  config.when（process.env.NODE_ENV === 'development'、config => { 
    config.plugin（ 'html'）。tap（args => { 
      args [ 0] .isProd = false 
      return args 
    }）
  }）
}

public / index.htmlホームページでは、isProdの値に基づいてページ構造をレンダリングする方法を決定できます。

<！ - ページのタイトルデマンドレンダリング - >
 < タイトル> <％= htmlWebpackPlugin.options.isProd？"「： 'のDev - ' ％>電気の供給業者のバックエンド管理システム</ タイトル> ; < ！- デマンド負荷外部CDNリソース- > < ％IF （htmlWebpackPlugin.options.isProd）{ ％> <！ - 外部CDNリソース外観がロード- > <％} ％>

vue.config.jsを開いてコードを追加します。

module.exports = { 
  chainWebpack：config => {
     // リリースモード-リリースステージのパッケージエントリ 
    config.when（process.env.NODE_ENV === 'production'、config => { 
      config.entry（ 'app'） .clear（）。add（ './ src / main-prod.js' ）
       // externals外部CDNリソースをロード 
      config.set（ 'externals' 、{ 
        vue： 'Vue' 、
         'vue-router'： 'VueRouter' 、
        Axios： 'Axios' 、
        lodash： '_' 、
        echarts： 'echarts' 、
        nProgress：'NProgress' 、
        'vue-quill-editor'： 'VueQuillEditor' 
      }）
      // ホームページのカスタマイズ 
      config.plugin（ 'html'）。tap（args => { 
        args [ 0] .isProd = true 
        return args 
      }）
    }）
    // 開発モード 
    -パッケージエントリの開発段階 config.when（process.env.NODE_ENV === 'development'、config => { 
      config.entry（ 'app'）。Clear（）。Add（ './ src / main-dev .js ' ）
       // ホームページのカスタマイズ 
      config.plugin（' html '）。tap（args => { 
        args [ 0]。isProd = false 
        return args 
      }）
    }）
  } 
}

index.htmlファイルを開きます。

< タイトル> <％= htmlWebpackPlugin.options.isProd？" 「： 'のDev - ' ％>電気の供給、バックエンド管理システム</ TITLE> 
< ！- CDN外部リソースのオンデマンドロード- > 
< ％IF （htmlWebpackPlugin。 options.isProd）{ ％> 
      <！- nprogressスタイルシートファイル- > 
      < リンクrel = "stylesheet" href = "https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css "  /> 
      <！- リッチテキストエディターのスタイルシートファイル- > 
      < link rel ="スタイルシート " href =" https：// cdn。staticfile.org/quill/1.3.6/quill.core.min.css " /> 
      < link rel = "stylesheet" href = "https://cdn.staticfile.org/quill/1.3.6/quill.snow.min.css"  /> 
      < link rel = "stylesheet" href = "https： //cdn.staticfile.org/quill/1.3.6/quill.bubble.min.css "  /> 
      <！- element-ui的样式表文件-> 
      < link rel =" stylesheet " href =" https： //cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css "  /> 
      <！- element-ui的js文件-> 
      < script src =" https：// cdn。 staticfile.org/element-ui/2.13。0 / index.js " > </ スクリプト> 
      < スクリプトsrc = "https://cdn.staticfile.org/vue/2.6.10/vue.min.js" > </ スクリプト> 
      < スクリプトsrc = "https://cdn.staticfile.org/vue- router / 3.1.3 / vue-router.min.js " > </ スクリプト> 
      < スクリプトsrc =" https://cdn.staticfile.org/axios/0.19.0/axios.min.js " > </ スクリプト> 
      < スクリプトsrc = "https://cdn.staticfile.org/lodash.js/4.17.15/lodash.min.js" > </ スクリプト> 
      < スクリプトsrc = "https://cdn.staticfile.org/ echarts / 4.7.0 / echarts。min.js " > </ スクリプト> 
      < スクリプトsrc = "https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js" > </ スクリプト> 
      <！- 富文本编辑器的js文件-> 
      < スクリプトsrc = "https://cdn.staticfile.org/quill/1.3.6/quill.min.js" > </ スクリプト> 
      < スクリプトsrc = "https://cdn.jsdelivr.net/npm/vue-quill- [email protected]/dist/vue-quill-editor.js " > </ スクリプト> 
<％} ％>

ビジュアルUIパネルを開き、最初にサービスを停止してから再実行します。この時点で、プロジェクトは正常に実行でき、以前のルートを再定義する問題は解決されています。

 

タイトルでdev-e-commerceバックグラウンド管理システムを確認し、右クリックしてソースコードを表示して、外部CDNリソースが参照されていないことを確認することもできます。

次に、ビルドで「実行」をクリックします。編集に成功したら、distフォルダーのindex.htmlファイルを開きます。タイトルと参照を検索して、外部CDNリソースをロードできます。