Maison > interface Web > js tutoriel > À quoi devez-vous faire attention lorsque vous utilisez le packaging vue-cli ?

À quoi devez-vous faire attention lorsque vous utilisez le packaging vue-cli ?

php中世界最好的语言
Libérer: 2018-05-31 10:00:27
original
1712 Les gens l'ont consulté

Cette fois, je vais vous présenter ce à quoi vous devez faire attention lors de l'utilisation du packaging vue-cli. Ce qui suit est un cas pratique, jetons un coup d'œil.

1. La commande d'empaquetage est npm run build. Cette commande est en fait la commande correspondant aux scripts de build dans package.json ; a prod.server.js. Ce fichier n'est pas nécessaire. Le but de ce fichier est d'accéder aux fichiers statiques empaquetés en démarrant le service local node.js une fois l'empaquetage terminé. 🎜>

Exemple de code de fichier prod.server.js :

3. Le js introduit à l'aide de la balise script et le fichier css introduit à l'aide du lien dans index.html sont tous modifiés en main. Importez directement dans js ; mon exemple de code main.js actuel :

4. Le problème du chemin relatif des images. Pour référencer les images sous des chemins relatifs, d'abord dans config/index.js, modifiez build.assetsPublicPath. à '', à l'origine c'était '/',

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');
});
Copier après la connexion

// 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 }
})
Copier après la connexion
Référencez l'image dans le fichier .vue S'il s'agit d'une référence statique, écrivez directement le chemin relatif If. c'est Pour les références dynamiques, vous devez écrire

comme ceci Pour les références statiques, écrivez directement le chemin relatif :

Pour les références dynamiques, vous devez exiger pour obtenir la dynamique. chemin :

La même image d'arrière-plan définie dynamiquement nécessite également l'obtention dynamique du chemin du fichier
<img src="../../base/img/home/me.jpg" class="round"/>
Copier après la connexion

<img :src="logo" class="logo-img" @click="toggleMenu"/>
Copier après la connexion
5. emballage, une erreur sera signalée après l'ouverture directe de index.html. Deux fichiers de polices sont introduits. Cela a échoué, mais je n'ai pas introduit manuellement ces deux fichiers ici. La solution finale de Baidu était de définir l'extrait dans module.rules sur false. webpack.prod.conf.js ; pour plus de détails, consultez ce numéro :
computed:{
 logo(){
  return require(`../../base/img/logo/logo${this.currentImg}.png`);
 }
}
Copier après la connexion
https://

github.com/iview/iview/issues/515

<p id="app" :style="backgroundStyle">
 <s-homepage></s-homepage>
</p>
Copier après la connexion
data() {
 return {
  backgroundStyle: {
   backgroundImage: `url("${require('./base/img/system/bg.jpg')}")`,
   backgroundRepeat: "no-repeat",
   backgroundSize: "100%",
  }
 }
}
Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention à php Chinois Autres articles connexes en ligne !

Lecture recommandée :

Comment empaqueter un projet vue sur le serveur

Comment utiliser webstorm pour ajouter *. fichiers vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal