1. 程式人生 > >使用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/>', 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打包過程步驟以及問題

1、打包命令是npm run build,這個命令實際上是在package.json中,scripts中build所對應的命令; 2、建立一個prod.server.js,這個檔案不是必須的,這個檔案的用處是在打包完畢之後,通過啟動node.js本地服務來訪問打包完成

關於用vue-cli打包dist檔案無法在頁面訪問

在嘗試用了vue-cli開發專案之後,在專案的最終用npm run build 打包完之後,使用了wamp工具訪問打包的檔案,但是在頁面中顯示所有的連結都沒有都是404. 因此我就查看了index檔案中的所有的外部連結。 之後我就發現了在index檔案裡面 <!D

Vue-cli項目引入Bootstrap

版本 下載 class pre 官網下載 css 依賴 font port (1)到bootstrap官網下載所需版本的bootstrap.zip文件。 (2)將bootstrap.min.css以及bootstrap.min.js解壓到assets文件夾,另外還需要將fo

vue環境搭建過程,遇到的坑爹的問題

core json pos 比較 all 堅持 鼓勵 路徑 log 1,在配置package.json下載node依賴包時,執行$cnpm install過程中,這個過程是比較漫長的,尤其的這種core i5配置的電腦,簡直有點卡的人懷疑人生,後來動了下有消息輸出,我以為下

vue-cli打包構建時常見的報錯解決方案

imu cli blog error: 背景 服務 strong 背景圖 log 報錯1:打包後丟到服務器中,打開是空白頁 報錯2:打包後想要在本地file中打開,但是打開是空白頁 報錯3:打包後在瀏覽器中打開,報錯ERROR in xxx.js from UglifyJs

關於npm警告fsevents和vue-cli項目的一些問題,持續更新

span .com 就會 window font main win 是我 cli 1.install一個npm包的時候,總是會報這個警告; 網上查資料知道,這個fsevents是mac下用的,windows忽略即可; 2.關於在main.js中引入less文件的問題

vue.js - 解決vue-cli打包後自動壓縮代碼

lena 搜索 .com clas 查看源碼 body 我們 pan hub 當我們用vue腳手架做完項目後,npm run build打包之後, 有沒有查看源碼,全是壓縮好的。但是我就不想讓它壓縮,該怎麽辦呢? 困惑了幾天,查了各種資料。終於終於... 來,上幹貨: 首先

vue-cli項目mockjs和vConsole的使用

turn enc image error RR http 控件 items main mockjs使用 1.安裝npm install mockjs 2.在src/assets目錄下創建個util文件夾,並在裏新建一個文件mock.js  例如: const Mock =

Vuex內容解析和vue cli項目使用狀態管理模式Vuex

ces timeout AD 所有 vue ... 介紹 -- 組裝   中文文檔:vuex官方中文網站 一、vuex裏面都有些什麽內容? const store = new Vuex.Store({ state: { name: ‘weish‘,

vue-cli 打包後顯示favicon.ico小圖標

cli 文件 技術 vue 相對路徑 alt src 分享 avi 第一步:favicon.ico小圖標放在static裏面 第二步:index.html 文件中引入時需要寫 ./ 相對路徑 第三部:npm run build 打包 打包完成就可以看到

Vue CLI 3開發屏蔽煩人的EsLint錯誤

pack conf extends erro web 前端框架 令行 版本 -m 問題 Vue開發中,特別是當你閱讀分析別人的其中早期版本的Vue代碼時往往會遭遇到滿屏幕的煩人的EsLint錯誤。有關EsLint這個工具的作用不再贅述。查閱網上參考文檔,大多是針對早起版本V

Vue腳手架 vue-cli 搭建過程--簡版

看到多圖預警我也很怕,所以寫了簡潔版,以後如果忘了,我也可以看看〜 如圖1所示,安裝的node.js:         從node.js官網下載並安裝node,安裝過程傻瓜式點選“下一步”就可以了。安裝完成之後,開啟

入門級---Vue腳手架(vue-cli)搭建過程---詳版

我覺得---對於初學者來說,首先應該是先知道為什麼要搭建腳手架vue-cli,然後再進行搭建...   什麼是腳手架,搭建的目的是什麼?          在工地上,腳手架是幫助工人作業搭建的架子,哈哈..

前端爬坑日記(1),你在初入vue專案開發過程可能會掉進的坑!

這篇文章是記錄我在vue專案開發中遇到的各種巨坑,希望看了能對你有一些幫助,這篇文章會長期更新 1.Vue中使用sass 首先通過以下程式碼安裝sass的依賴: npm i sass-loader node-sass - s 然後在webepack.base.conf.js目錄下配置

Vue CLI 3開發試用UIkit 3元件庫

一、UIkit元件庫與vuikit簡介 在選擇好意中的前端開發基本框架後,接下來一個重要任務就是選擇一款好的UI元件庫。其中,UIkit元件庫是一款基於Less+JS的一款輕量級、模組化、響應式的前端UI元件庫。特別是,從版本3.0.0 beta 31開始完全脫離了jQuery框架。UIkit元件庫的一個重

Vue CLI 3開發試用UIkit 3組件庫

基本 輕量 接下來 mod ide 當前 -a ext module 一、UIkit組件庫與vuikit簡介 在選擇好意中的前端開發基本框架後,接下來一個重要任務就是選擇一款好的UI組件庫。其中,UIkit組件庫是一款基於Less+JS的一款輕量級、模塊化、響應式的前端UI

vue-cli(vue2.x)使用axios

Axios 是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。 特性 瀏覽器端發起XMLHttpRequests請求 Node端發起http請求 支援Promise API 攔截請求和響應 轉化請求和響應(資料) 取消請求 自動轉化json資料 客戶

vue-cli 打包 使用 history模式 的後端配置

apach href direct pub htaccess over 指向 -c 路徑 apache的配置 這是windows下的 在httpd-vhosts.conf文件中把目錄指向項目index.html文件所在的位置 # Virtual Hosts # &l

maven打包過程,報第三方jar包不存在

maven打包過程用的是maven-compiler-plugin外掛進行編譯,但是由於專案中存在第三方jar包,maven-compiler-plugin無法獲知第三方jar包的位置,因此報錯“程式包xxx不存在”,解決方法: <groupId>org.apache.m

vue-cli 打包編譯 -webkit-box-orient: vertical 被刪除解決辦法

前言 github有人就此問題提問了, 也有了解決辦法, https://github.com/cssnano/cssnano/issues/357, 具體怎麼做,我這裡做一下記錄 正文 原因: -webkit-box-orient: vertical  這個屬性被 optimize-css