使用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所对应的命令;
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文件中引用图片,如果是静态引用,直接写相对路径,如果是动态引用,需要这样写
静态引用,直接写相对路径:
<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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
Android 使用volley过程中遇到的问题解决办法
-
Hadoop环境搭建过程中遇到的问题以及解决方法
-
使用vue-cli打包过程中的步骤以及问题的解决
-
使用proxytable 配置解决 vue-cli 的跨域请求问题【推荐】
-
解决vue-cli脚手架打包后vendor文件过大的问题
-
倒计时cocos定时器schude使用的过程中 帧率浮动较大导致执行时机不准确的问题解决
-
解决vue-cli webpack打包后加载资源的路径问题
-
解决layui的使用以及针对select、radio等表单组件不显示的问题
-
Vue cli构建及项目打包以及出现的问题解决
-
解决vue-cli项目打包出现空白页和路径错误的问题