搜尋
首頁web前端js教程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');
// 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></app>',
 components: { App }
})

4、圖片的相對路徑問題,要引用相對路徑下的圖片,首先是在config/index.js中,將build.assetsPublicPath改為'',原來是'/',

在.vue檔案中引用圖片,如果是靜態引用,直接寫相對路徑,如果是動態引用,需要這樣寫

靜態引用,直接寫相對路徑:

<img  class="round lazy" src="/static/imghwm/default1.png" data-src="../../base/img/home/me.jpg" alt="vue-cli打包過程中常見問題處理" >

動態引用,需要require取得動態路徑:

<img  class="logo-img lazy" src="/static/imghwm/default1.png" data-src="logo" alt="vue-cli打包過程中常見問題處理" >
computed:{
 logo(){
  return require(`../../base/img/logo/logo${this.currentImg}.png`);
 }
}

同樣的動態設定背景圖片也需要動態取得文件路徑;

<p>
 <s-homepage></s-homepage>
</p>
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

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

vue2.0實作輸入框即時擷取更新步驟詳解

JS實作簡單購物車功能程式碼分析

以上是vue-cli打包過程中常見問題處理的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
PHP邮件发送方法及常见问题汇总PHP邮件发送方法及常见问题汇总Jun 08, 2023 pm 10:57 PM

在互联网时代,邮件已经成为人们生活、工作中不可或缺的一个部分。PHP作为一种广泛应用于Web开发领域的语言,邮件发送在Web应用中也是必不可少的。本文将详细介绍PHP邮件发送的相关内容和常见问题汇总。一、PHP邮件发送方法PHPmailer库PHPmailer是一种功能强大的PHP邮件发送类库,它可以轻松地发送HTML格式和纯文本格式的邮件。使用PHPmai

PHP数据分页方法及常见问题详解PHP数据分页方法及常见问题详解Jun 09, 2023 am 08:42 AM

一、前言随着数据处理的不断增多,数据分页成为了一个极其重要的功能。而PHP作为一门广泛应用于Web开发的语言,自然也会有自己的数据分页方法。本文就会对PHP数据分页方法和常见问题进行详细解析。二、PHP数据分页方法1.原始方法数据分页最简单的做法就是使用SQL语句的LIMIT子句,根据每一页需要显示的记录数和当前页码,计算出offset,在查询时添加

Go语言ORM框架常见问题解析Go语言ORM框架常见问题解析Jun 03, 2023 am 09:22 AM

在现代的Web应用中,使用ORM框架来处理数据库操作已经成为了标配。而在所有的ORM框架中,Go语言ORM框架是越来越受到开发者的关注和喜爱的。然而,当我们使用Go语言ORM框架时,我们可能会遇到一些常见的问题。在本文中,我们将会分析并解决这些常见问题,以便更好地使用Go语言ORM框架。关于GORM的数据模型定义在GORM中,我们可以使用struct定义数据

Vue 中 Vue-cli 的详细使用方法指南Vue 中 Vue-cli 的详细使用方法指南Jun 26, 2023 am 08:03 AM

Vue是一种流行的前端框架,它的灵活性和易用性受到了许多开发者的青睐。为了更好的开发Vue应用程序,Vue团队开发了一个强大的工具-Vue-cli,使得开发Vue应用程序变得更加容易。本文将为您详细介绍Vue-cli的使用方法。一、安装Vue-cli使用Vue-cli之前,需要先安装它。首先,您需要确保已经安装了Node.js。然后,使用npm安装Vue-c

详解Css Flex 弹性布局中的常见问题及解决方案详解Css Flex 弹性布局中的常见问题及解决方案Sep 26, 2023 pm 01:19 PM

详解CSSFlex弹性布局中的常见问题及解决方案引言:CSSFlex弹性布局是一种现代的布局方式,其具有优雅简洁的语法和强大的灵活性,广泛应用于构建响应式的web页面。然而,在实际应用中,经常会遇到一些常见的问题,如元素排列不如预期、尺寸不一致等。本文将详细介绍这些问题,并提供相应的解决方案,代码示例如下。一、元素排列不如预期问题问题描述:在使用Flex

Vue-cli脚手架的使用及其插件推荐Vue-cli脚手架的使用及其插件推荐Jun 09, 2023 pm 04:11 PM

Vue-cli是Vue.js官方提供的搭建Vue项目的脚手架工具,通过使用Vue-cli可以快速搭建Vue项目的基本骨架,便于开发人员将注意力集中在业务逻辑的实现上,而不用花费大量时间来配置项目的基础环境。本文将介绍Vue-cli的基本使用方法以及常用的插件推荐,旨在为初学者提供一份Vue-cli的使用指南。一、Vue-cli的基本使用方法安装Vue-cli

Vue-cli3.0脚手架创建Vue项目步骤和过程Vue-cli3.0脚手架创建Vue项目步骤和过程Jun 09, 2023 pm 04:08 PM

Vue-cli3.0是一个基于Vue.js的全新脚手架工具,它可以帮助我们快速创建一个Vue项目并且提供了很多便捷的工具和配置。下面我们就来一步步介绍使用Vue-cli3.0创建项目的步骤和过程。安装Vue-cli3.0首先需要全局安装Vue-cli3.0,可以通过npm进行安装:npminstall-g@vue/cli安

PHP图像处理方法及常见问题详解PHP图像处理方法及常见问题详解Jun 09, 2023 am 08:19 AM

PHP是一种非常流行的服务器端脚本语言,可以处理各种各样的Web任务,其中包括图像处理。本文将介绍PHP中的一些图像处理方法以及可能遇到的一些常见问题。一、在PHP中处理图像的方式1.使用GD库GD(GNU图像处理库)是一种用于图像处理的开放源码库。它允许PHP开发人员在脚本中使用图像来创建和操作,包括缩放、剪裁、旋转、过滤和绘制等。在使用GD库之前,需要确

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中