이번에는 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 중국어 웹사이트의 다른 관련 기사에 주목하세요!추천 도서:
vue 프로젝트를 서버에 패키징하는 방법webstorm을 사용하여 *.vue 파일을 추가하는 방법
위 내용은 vue-cli 패키징을 사용할 때 주의해야 할 점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!