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 サイトの他の関連記事に注目してください。

推奨読書:

vue プロジェクトをサーバーにパッケージ化する方法

ウェブストームを使用して *.vue ファイルを追加する方法

以上がvue-cli パッケージを使用する際に注意すべき点は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。