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

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

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

您可能感兴趣的文章:

  • vue-cli扩展多模块打包的示例代码
  • 基于vue-cli 打包时抽离项目相关配置文件详解
  • vue cli构建的项目中请求代理与项目打包问题
  • vue-cli中打包图片路径错误的解决方法
  • vue-cli 如何打包上线的方法示例
赞 (0)

相关推荐

  • vue-cli中打包图片路径错误的解决方法

    vue-cli中打包图片路径错误的解决方法

    最近第一次使用vue-cli构建项目,第一次打包部署到服务器上的时候出现图片加载不出来,结合网上的方法,终于给摸索出来.将项目部署到服务器上分为两种:一种是直接部署到服务器的根目录,另外一种是部署到服务器的子目录下 1.我们首先来说部署到根目录下 就是比如:www.****.com 找到项目中config文件夹下的index.js文件 将文件中的assetsPublicPath: '/',改成如下方框这样. 这样的目的是将绝对路径改成相对路径 如果放在根目录下,这样就可以了 2.放在子目录下 如

  • vue-cli 如何打包上线的方法示例

    以vue创建的官方例子为例子,我们在开发环境的时候会 npm run dev ,生成 而想要打包成一份很简单, 只需要 npm run build 这个命令 这两种命令的配置文件在config的index.js 一种是build 一种是dev ,而我们想要在本地查看打包后的成果,需要在assetsPublicPath 改变它的路径, 具体为什么,可以看index.html引入的文件路径 之后只需要放在服务器上运行就好了. *常用技巧 1.如果在config -> index.js 中的 buil

  • 基于vue-cli 打包时抽离项目相关配置文件详解

    前言:当使用vue-cli进行开发时时常需要动态配置一些设置,比如接口的请求地址(axios.defaults.baseURL),这些设置可能需要在项目编译后再进行设置的,所以在vue-cli里我们需要对这些配置文件进行抽离,不让webpack把配置文件也进行编译. 首先,我们需要在/static 下面新建一个js文件作为配置文件 里面的内容如下: window.g={ AXIOS_TIMEOUT:10000, SERVICE_CONTEXT_PATH:`http://10.200.199.84

  • vue-cli扩展多模块打包的示例代码

    场景 在实际的项目开发中会出现这样的场景,项目中需要多个模块(单页或者多页应用)配合使用的情况,而vue-cli默认只提供了单入口打包,所以就想到对vue-cli进行扩展 实现 首先得知道webpack是提供了多入口打包,那就可以从这里开始改造 新建build/entry.js const path = require('path') const fs = require('fs') const moduleDir = path.resolve(__dirname, '../src/module

  • vue cli构建的项目中请求代理与项目打包问题

    在上篇文章给大家介绍了vue-cli webpack模板项目搭建及打包时路径问题的解决方法,可以点击查看. vue-cli构建的项目中,生产模式下的打包路径.与生产模式下的请求代理简单示意 总结 以上所述是小编给大家介绍的vue cli构建的项目中请求代理与项目打包问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 您可能感兴趣的文章: Vue-cli创建项目从单页面到多页面的方法 Vue使用vue-cli创建项目 vue-cli项

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

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

  • 浅谈webpack打包过程中因为图片的路径导致的问题

    最近在制作一个自己的个人博客的时候遇到这么一个问题, 在CSS中使用了相对路径来充当背景图片, 如下所示: 然后将整个工程使用webpack打包之后, 在浏览器上运行却报错了, 报错如下: 也就是说, 打包之后这个图片文件找不到了, 那么原因出在哪里呢? 先来看一下我在webpack.config.js文件中的配置: 在这里其实我的loader并没有使用错误的, 图片对应的就是使用url-loader来处理. 那么再来看一下通过webpack打包之后的目录: 发现dist文件夹中出现了我们想要打

  • Vue插件实现过程中遇到的问题总结

    目录 场景介绍 插件实现 问题一.重复的头部组件 问题二.另一种实现思路 问题三.是否可以不使用Vue.extend 总结 场景介绍 最近做H5遇到了一个场景:每个页面需要展示一个带有标题的头部.一个实现思路是使用全局组件.假设我们创建一个名为TheHeader.vue的全局组件,伪代码如下: <template> <h2>{{ title }}</h2> </template> <script> export default { props:

  • Vue组件传值过程中丢失数据的分析与解决方案

    Vue组件传值过程中丢失数据的分析与解决方案

    前言 在上一篇文章 JavaScript 中的两种数据类型中,分别介绍了基本类型和引用类型,以及引用类型的浅拷贝与深拷贝.这里需要注意的是,该文章中深拷贝引用类型值的方法,并不是完美的,引用类型值中的某些属性值,仍不能完整地复制到新的变量中.比如函数值,在深拷贝过程中,就会丢失. 问题 在实际项目中,假如使用了二次封装的组件,并且封装的组件内部做了一些属性值的深拷贝操作,就有极有可能因为传入的属性值是引用类型的值,导致丢失部分数据. 举例 以基于 el-table 封装的 ak-table 组件

  • VisualStudio Community2019在安装的过程中无法进入安装界面的解决方法

    今天在安装VS2019的时候,在安装的过程中一直无法进入安装界面,在网上找了各种方法试了将近40分钟都没有找到有效的办法,不过就快放弃的时候,问题解决了,哈哈哈!!!! 1.下载地址:https://visualstudio.microsoft.com/zh-hans/thank-you-downloading-visual-studio/?sku=Community&rel=16(官网) 2.运行之后,读完进度条之后,就退出了,无法进入到安装界面.类似下面的截图,截图是网上找的,懒得自己在重新

  • MySQL MGR搭建过程中常遇见的问题及解决办法

    MGR搭建过程中遇到的一些故障 实际中我一共部署了三套MGR环境,分别是单机多实例的MGR环境,多机同网段的MGR环境,多机不同网段的MGR环境,部署的过程大同小异,但是还是有一些有出入的地方,这里把部署过程遇到的故障列举出来,供大家参考,如果能有幸解决您在部署时候的问题,那是极好的. 01 常见故障1 [ERROR] Plugin group_replication reported: 'This member has more executed transactions than those

  • layui实际项目使用过程中遇到的兼容性问题及解决

    目录 layui项目使用过程中遇到的兼容性问题 layui实践兼容 layui在vue项目中不能自动渲染的问题 layui中获取layui路径方法不兼容IE11的问题 解决方法 在IE8下使用layui遇到的坑 栅格系统不支持 上传preview方法不支持 上传弹出下载框 总结 layui项目使用过程中遇到的兼容性问题 layui实践兼容 记录自己在layui的实际使用过程中遇到的一些兼容性问题,烂笔头>>>大脑 layui在vue项目中不能自动渲染的问题 下载layui源码到本地,在v

  • vue项目打包发布后接口报405错误的解决

    vue项目打包发布后接口报405错误的解决

    目录 vue项目打包发布后接口报405 vue项目打包之后接口出现错误问题 错误信息 关键代码 解决方式 vue项目打包发布后接口报405 vue项目前端做了代理打包后后台不识别报405 not allowed vue.config.js文件配置   devServer: {     // host: "0.0.0.0", //项目运行时的本地地址     // port: 8880, // 端口号     //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为

  • vue项目打包之后接口出现错误的问题及解决

    vue项目打包之后接口出现错误的问题及解决

    目录 错误信息 关键代码 打包前 打包后 解决方式 设置环境变量 总结 错误信息 这是新建一个项目还原问题,node简单写了个数据返回 关键代码 const express = require('express') const app = express(); // 解决跨域问题 app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header(

  • Python中遍历字典过程中更改元素导致异常的解决方法

    先来回顾一下Python中遍历字典的一些基本方法: 脚本: #!/usr/bin/python dict={"a":"apple","b":"banana","o":"orange"} print "##########dict######################" for i in dict: print "dict[%s]=" % i,

随机推荐