首頁 web前端 js教程 vue-cli打包步驟詳解

vue-cli打包步驟詳解

May 12, 2018 am 10:15 AM
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/>',
 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`);
 }
}
登入後複製

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

<p id="app" :style="backgroundStyle">
 <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中文網其它相關文章!

推薦閱讀:

PHP共享記憶體使用與訊號控制使用詳解

JS DOM元素常見增刪改查操作詳解

以上是vue-cli打包步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Win11管理員權限取得詳解 Win11管理員權限取得詳解 Mar 08, 2024 pm 03:06 PM

Win11管理員權限取得詳解

Oracle SQL中的除法運算詳解 Oracle SQL中的除法運算詳解 Mar 10, 2024 am 09:51 AM

Oracle SQL中的除法運算詳解

VSCode功能詳解:它如何幫助你提高工作效率? VSCode功能詳解:它如何幫助你提高工作效率? Mar 25, 2024 pm 05:27 PM

VSCode功能詳解:它如何幫助你提高工作效率?

PHP模運算子的作用及用法詳解 PHP模運算子的作用及用法詳解 Mar 19, 2024 pm 04:33 PM

PHP模運算子的作用及用法詳解

linux系統呼叫system()函數詳解 linux系統呼叫system()函數詳解 Feb 22, 2024 pm 08:21 PM

linux系統呼叫system()函數詳解

詳細解析C語言學習路線 詳細解析C語言學習路線 Feb 18, 2024 am 10:38 AM

詳細解析C語言學習路線

Linux的curl指令詳解 Linux的curl指令詳解 Feb 21, 2024 pm 10:33 PM

Linux的curl指令詳解

Python 應用的終極進化:PyInstaller 的破繭成蝶 Python 應用的終極進化:PyInstaller 的破繭成蝶 Feb 19, 2024 pm 03:27 PM

Python 應用的終極進化:PyInstaller 的破繭成蝶

See all articles