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

今回は、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></app>',
 components: { App }
})

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

<img  class="round lazy" src="/static/imghwm/default1.png" data-src="../../base/img/home/me.jpg" alt="vue-cli パッケージ化プロセスでの一般的な問題の処理" >

<img  class="logo-img lazy" src="/static/imghwm/default1.png" data-src="logo" alt="vue-cli パッケージ化プロセスでの一般的な問題の処理" >

動的に設定される同じ背景画像も動的にする必要があります。

computed:{
 logo(){
  return require(`../../base/img/logo/logo${this.currentImg}.png`);
 }
}

<p>
 <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 サイトの他の関連記事を参照してください。