パッケージング前のルーティングモード
****目标パッケージ化する前にルーティングモードを設定します
SPAシングルページアプリケーションには、2つのルーティングモードがあります
ハッシュモード：＃背後には、フロントエンドアクセスを特徴とするルーティングパスがあります。＃サーバーを通過しなかった後に変更されます。
履歴モード：バックエンドアクセスを特徴とする通常/アクセスモード。アドレスを変更するとサーバーにアクセスします。
これまで、パッケージ化にはハッシュモードを使用してきましたが、履歴モードを使用しようとしました
履歴モードに変更するのは非常に簡単です。ルートのモードタイプを履歴に変更するだけです。
const createRouter = () => new Router({
mode: 'history', // require service support
scrollBehavior: () => ({
y: 0 }), // 管理滚动行为 如果出现滚动 切换就让 让页面回到顶部
routes: [...constantRoutes] // 改成只有静态路由
})
私たちのアドレスは次のようであると仮定
www.xxxx/com/hr/www.xxxx/com/hr/ B
実際、ドメイン名は** www.xxxx/com**であり、hrは特定のプレフィックスアドレスであることがわかります。この時点で、hrとして構成されている基本属性を構成できます。
const createRouter = () => new Router({
mode: 'history', // require service support
base: '/hr/', // 配置项目的基础地址
scrollBehavior: () => ({
y: 0 }), // 管理滚动行为 如果出现滚动 切换就让 让页面回到顶部
routes: [...constantRoutes] // 改成只有静态路由
})
この時点で、アドレスが必要なものになっていることがわかります
コードを送信する
パフォーマンス分析とCDNアプリケーション
目标：開発したアプリケーションでパフォーマンス分析とCDNアプリケーションを実行する
パフォーマンス分析
関数を統合し、多くのコンポーネントを作成し、最終的にはそれらを一連のファイルにパッケージ化する予定ですが、実際の操作のパフォーマンスはどのくらいですか？
vue-cli自体が提供するパフォーマンス分析ツールを使用して、開発したすべての機能をパッケージ化して分析できます。
そのアプリケーションは非常に簡単です
$ npm run preview -- --report
このコマンドは、** 入口main.js**から依存関係分析を実行し、最大のパッケージを分析します。これは、監視と最適化に便利です。
このコマンドを実行すると、次のページが表示されます
図に示すように、正方形が大きいほど、ファイルが占めるファイルも大きくなります。ファイルが大きいほど、ネットワーク帯域幅とアクセス速度の要件が高くなります。これが最適化の方向です。
この場合、どうすればそれを最適化できますか？
webpackはパッケージを除外します
CDNはより良い方法です
ファイルは大きくありませんか？これらの大きなファイルをこれらの小さなファイルと一緒にパックしたくありません。xlsx、element、その他の完全に機能するプラグインなどのCDNサーバーに配置して、パッケージ全体のサイズを縮小できます。次に、CDNのアクセラレーションサービスで速度を上げることができます。プラグインへのアクセスを向上させる
使い方
最初に見つけてvue.config.js、パッケージ化されていないものを追加externalsし、webpackxlsxelement
vue.config.js
// 排除 elementUI xlsx 和 vue
externals:
{
'vue': 'Vue',
'element-ui': 'ELEMENT',
'xlsx': 'XLSX'
}
もう一度実行すると、パッケージのサイズが大幅に縮小されていることがわかります
CDNファイルの構成
ただし、パッケージ化されていないいくつかのモジュールを処理するにはどうすればよいですか？
CDNを使用して、ページテンプレートに事前にインポートできます
vue.config.js
const cdn = {
css: [
// element-ui css
'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // 样式表
],
js: [
// vue must at first!
'https://unpkg.com/vue/dist/vue.js', // vuejs
// element-ui js
'https://unpkg.com/element-ui/lib/index.js', // elementUI
'https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js'
]
}
ただし、この時点での構成は、実際には開発環境と実稼働環境の両方で有効であることに注意してください。開発環境では、CDNを使用する必要はありません。現時点では、環境変数を使用して区別できます。
let cdn = {
css: [], js: [] }
// 通过环境变量 来区分是否使用cdn
const isProd = process.env.NODE_ENV === 'production' // 判断是否是生产环境
let externals = {
}
if (isProd) {
// 如果是生产环境 就排除打包 否则不排除
externals = {
// key(包名) / value(这个值 是 需要在CDN中获取js, 相当于 获取的js中 的该包的全局的对象的名字)
'vue': 'Vue', // 后面的名字不能随便起 应该是 js中的全局对象名
'element-ui': 'ELEMENT', // 都是js中全局定义的
'xlsx': 'XLSX' // 都是js中全局定义的
}
cdn = {
css: [
'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // 提前引入elementUI样式
], // 放置css文件目录
js: [
'https://unpkg.com/vue/dist/vue.js', // vuejs
'https://unpkg.com/element-ui/lib/index.js', // element
'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js', // xlsx 相关
'https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js' // xlsx 相关
] // 放置js文件目录
}
}
CDNファイルをテンプレートに挿入します
それから存在にhtml-webpack-plugin注入さindex.htmlれます：
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
})
見つかりましたpublic/index.html。構成を介してCDN Configcssとjsを順番に挿入します。
<head>
<!-- 引入样式 -->
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%=css%>">
<% } %>
</head>
<!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>
最後に、それを梱包します
$ npm run build:prod
nodejs環境でクロスドメインを適用してプロキシする
** 目标**パッケージ化されたコードをパッケージ化してオンラインにし、nodejsでクロスドメインをプロキシします
koaフレームワークを使用してプロジェクトをデプロイします
これまでのところ、フロントエンドエンジニアの開発プロセスは完了していますが、通常の慣例に従って、この時点で、運用と保守によってコードがAlibaba Cloudのngixサービスにデプロイされます。ネイティブnodejs環境で
自動展開/手動展開
最初のステップは、Webサービスフォルダーを作成することです hrServer
$ mkdir hrServer #建立hrServer文件夹
2番目のステップは、このフォルダーでnpmを初期化することです
$ npm init -y
3番目のステップは、サーバー側フレームワークkoaをインストールすることです（expressまたはeggも使用できます）
$ npm i koa koa-static
第四の工程は、前のセクションにパッケージdistのディレクトリをコピーすることですへ** hrServer/public**
5番目のステップは、ルートディレクトリにapp.jsを作成することです。コードは次のとおりです。
const Koa = require('koa')
const serve = require('koa-static');
const app = new Koa();
app.use(serve(__dirname + "/public")); //将public下的代码静态化
app.listen(3333, () => {
console.log('人资项目启动')
})
この時点で、http：// localhost：3333にアクセスできます。
ページが出ました
履歴ページへのアクセスの問題を解決する
ただし、現時点では2つの問題があります。
- ページを更新すると、404が見つかります
これは、履歴モデルを採用しているためです。アドレスを変更すると、サーバーが更新されます。app.js内のすべてのアドレスを処理するだけで済みます。
koaミドルウェアをインストールする
$ npm i koa2-connect-history-api-fallback #专门处理history模式的中间件
ミドルウェアを登録する
const Koa = require('koa')
const serve = require('koa-static');
const {
historyApiFallback } = require('koa2-connect-history-api-fallback');
const path = require('path')
const app = new Koa();
// 这句话 的意思是除接口之外所有的请求都发送给了 index.html
app.use(historyApiFallback({
whiteList: ['/prod-api']
})); // 这里的whiteList是 白名单的意思
app.use(serve(__dirname + "/public")); //将public下的代码静态化
app.listen(3333, () => {
console.log('人资项目启动')
})
本番環境でのクロスドメインの問題を解決する
- ログインをクリックすると、インターフェース404が見つかりました
前述したように、vue-cliのプロキシは開発期間にのみ存在します。ノード環境またはngix環境にオンラインで接続するときは、その環境で再度プロキシする必要があります。
nodejsのプロキシ
クロスドメインプロキシミドルウェアをインストールする
$ npm i koa2-proxy-middleware
スパニングエージェントを構成する
const proxy = require('koa2-proxy-middleware')
app.use(proxy({
targets: {
// (.*) means anything
'/prod-api/(.*)': {
target: 'http://ihrm-java.itheima.net/api', //后端服务器地址
changeOrigin: true,
pathRewrite: {
'/prod-api': ""
}
}
}
}))
注：ここでpathRewriteが使用される理由は、実稼働環境の要求ベースアドレスが/ prod-apiであり、これを削除する必要があるためです。
この時点で、私たちのプロジェクトはドメイン間でアクセスできます！
これまで、より複雑な中期プロジェクトの構造と開発を10日以上で完了しました。複雑なプロジェクトはすべて、合理的な設計とレイアウトによってさまざまな機能で組み立てられます。したがって、将来的には、それぞれの能力が私たちの学生が習得しなければならないのは、プロジェクトの難しさと複雑さに関係なく、テクノロジーの分離と設計を学ぶことです。そうすることで、私たちの開発能力はますます強くなります。