vue-cli 패키징 단계에 대한 자세한 설명-JS 튜토리얼-php.cn

vue-cli 패키징 단계에 대한 자세한 설명

php中世界最好的语言

풀어 주다： 2018-05-12 10:15:34

원래의

2289명이 탐색했습니다.

이번에는 vue-cli 패키징 단계에 대한 자세한 설명을 가져왔습니다. vue-cli 패키징 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

1. 패키징 명령은 실제로 package.json의 빌드에 해당하는 명령입니다.

2 이 파일은 필요하지 않습니다. 이 파일의 목적은 패키징이 완료된 후 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에서 직접 가져오도록 변경되었습니다. 현재 main.js 코드 예:

// 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 }
})

로그인 후 복사

4. 상대 경로 아래의 이미지를 참조하고 먼저 config/index.js에서 build.assetsPublicPath를 ''로 변경합니다. 원본은 '/'입니다.

정적 참조인 경우 .vue 파일의 이미지를 참조합니다. , 상대 경로를 직접 작성하세요. 동적 참조인 경우 다음과 같이 작성해야 합니다.

정적 참조, 상대 경로를 직접 작성:

<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>

로그인 후 복사

data() {
 return {
  backgroundStyle: {
   backgroundImage: `url("${require('./base/img/system/bg.jpg')}")`,
   backgroundRepeat: "no-repeat",
   backgroundSize: "100%",
  }
 }
}

로그인 후 복사

5. iview를 사용하여 개발하는 경우 패키징 후 index.html을 직접 열면 오류가 발생합니다. , 그러나 여기서는 이 두 파일을 수동으로 소개하지 않았습니다. 마침내 Baidu가 도착했습니다. 해결책은 webpack.prod.conf.js에서 module.rules의 extract를 false로 설정하는 것입니다. 자세한 내용은 다음 문제를 참조하세요. .com/iview/iview/issues/515

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!