哈三中三模,黄维德个人资料,中国净水器网
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、在中使用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开发的话,打包之后,直接打开之后会报错,有两个字体文件引入失败,但是我这里是没有手动引入这两个文件的,最后百度到解决办法是,在webpack.prod.conf.js中设置module.rules中的extract为false;详情见这个issue:https://github.com/iview/iview/issues/515
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论