使用vue-cli打包过程中的步骤以及问题
来源:互联网 发布:淘宝客推广的入口 编辑:程序博客网 时间:2024/06/05 05:21
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');});
// 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
阅读全文
0 0
- 使用vue-cli打包过程中的步骤以及问题
- vue.js使用vue-cli打包遇到的坑,问题
- vue-cli项目安装使用stylus步骤
- 使用vue-cli构建项目步骤
- vue-cli webpack模板项目搭建以及打包时路径问题的解答
- vue-cli webpack模板项目搭建以及打包时路径问题的解答
- vue-cli安装过程遇到问题
- vue-cli安装步骤
- Vue 使用过程中的问题记录
- 使用vue-cli开发时跨域问题
- Vue-cli安装过程
- 记录 vue-cli build 打包之后的问题
- vue-cli 打包找不到 css 资源或者图片资源问题
- 使用vue-cli创建vue项目问题纪录
- vue-cli打包过程及打包后与node交互实现
- vue-cli构建vue项目步骤
- vue-cli 使用入门
- vue-cli使用总结
- springmvc 406错误
- 破解VBA密码
- 依赖及权限
- [Git痛点讲解 : 不断完善中]
- 堆排序-乡巴老都能懂
- 使用vue-cli打包过程中的步骤以及问题
- 数据结构实验之查找五:平方之哈希表
- input输入框autofill自动变成黄色
- wake-sleep 算法的个人理解
- 基于Dragonboard 410c的指纹锁(六)
- linux与andriod区别
- 哎~ 下个月的口粮
- 【vs调试】PDB文件:每个开发人员都必须知道的
- 电影《芳华》名利双收,与华谊的对赌协议让冯小刚憋出了大招