欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-11 22:41:10
1、打包命令是npm run build,这个命令实际上是在package.json中,scripts中build所对应的命令; 2、创建一个prod.serve...

1、打包命令是npm run build,这个命令实际上是在package.json中,scripts中build所对应的命令;

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

2、创建一个prod.server.js,这个文件不是必须的,这个文件的用处是在打包完毕之后,通过启动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和使用link引入的css文件,全部改为在main.js中直接import;我目前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-cli打包过程中的步骤以及问题的解决

在.vue文件中引用图片,如果是静态引用,直接写相对路径,如果是动态引用,需要这样写

静态引用,直接写相对路径:

<img src="../../base/img/home/me.jpg" class="round"/>

动态引用,需要require获取动态路径:

<img :src="logo" class="logo-img" @click="togglemenu"/>
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

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

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