使用vue-cli打包过程中的步骤以及问题的解决

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');
});

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

<img src="/UploadFiles/2021-04-02/me.jpg">

动态引用，需要require获取动态路径：


<img :src="/UploadFiles/2021-04-02/logo">



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


同样的动态设置背景图片也需要动态获取文件路径；


<div id="app" :style="backgroundStyle">
 <s-homepage></s-homepage>
</div>




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



5、使用iview开发的话，打包之后，直接打开index.html之后会报错，有两个字体文件引入失败，但是我这里是没有手动引入这两个文件的，最后百度到解决办法是，在webpack.prod.conf.js中设置module.rules中的extract为false;详情见这个issue：https://github.com/iview/iview/issues/515

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。