ホームページ  >  記事  >  ウェブフロントエンド  >  vue-cli パッケージ化プロセスでの一般的な問題の処理

vue-cli パッケージ化プロセスでの一般的な問題の処理

php中世界最好的语言
php中世界最好的语言オリジナル
2018-05-23 11:34:303224ブラウズ

今回は、vue-cli パッケージ化プロセス中の 一般的な問題 の処理について説明します。vue-cli パッケージ化プロセス中に対処するための 注意事項 は何ですか?実際のケースを一緒に見てみましょう。

1. パッケージ化コマンドは npm run build です。このコマンドは実際には package.json の build に対応するコマンドです。このファイルは必要ありません。このファイルの目的は、パッケージ化の完了後に、node.js ローカル サービスを開始して、パッケージ化された静的ファイルにアクセスすることです。これが必要ない学生は、これを無視してください。

prod.server.js ファイルのコード例:

let express = require('express');
let config = require('./config/index');
// let axios = require('axios');
let app = express();
let apiRoutes = express.Router();
app.use('/api', apiRoutes);
app.use(express.static('./dist'));
let port = process.env.PORT || config.build.port;
module.exports = app.listen(port, (err) => {
 if (err){
  console.error(err);
  return;
 }
 console.log('Listening at: http://localhost:'+port+'\n');
});
3、index.html の scrip タグを使用してインポートされた js とリンクを使用して導入された CSS ファイルはすべて main.js に直接インポートされるように変更されました。相対パスで画像を参照します。まず、config/index.js で build.assetsPublicPath を '' に変更します。元の値は '/' です。

.vue ファイル内の画像を参照します (静的参照の場合)。動的参照の場合は、相対パスを直接記述します:

静的参照の場合は、相対パスを直接記述します:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
import 'src/base/css/libs/museui/muse-ui-fonts.css'
import 'src/base/css/libs/museui/muse-ui-icons.css'
import VueResource from 'vue-resource'
import 'src/base/js/libs/waves/waves.min.js'
import 'src/base/css/libs/waves/waves.min.css'
import $ from 'jquery'
Vue.use(VueResource);
Vue.use(iView);
Vue.use(VueAwesomeSwiper);
Vue.use(MuseUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

動的参照の場合は、動的パスを取得する必要があります:

<img src="../../base/img/home/me.jpg" class="round"/>
<img :src="logo" class="logo-img" @click="toggleMenu"/>
動的に設定される同じ背景画像も動的にする必要があります。

computed:{
 logo(){
  return require(`../../base/img/logo/logo${this.currentImg}.png`);
 }
}
<p id="app" :style="backgroundStyle">
 <s-homepage></s-homepage>
</p>
5. iview を使用して開発する場合、index.html を直接開くとエラーが発生します。ただし、ここではこれら 2 つのファイルを手動で導入しませんでした。最終的に、解決策は、webpack.prod.conf.js の module.rules を false に設定することです。詳細については、この問題を参照してください。 .com/iview/iview/issues/515

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue2.0 入力ボックスのリアルタイム取得と更新を実装する手順の詳細な説明

単純なショッピングカート関数コード分析のJS実装

以上がvue-cli パッケージ化プロセスでの一般的な問題の処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。