使用vue-cli打包過程中的步驟以及問題的解決
1、打包命令是npm run build,這個命令實(shí)際上是在package.json中,scripts中build所對應(yīng)的命令;
2、創(chuàng)建一個prod.server.js,這個文件不是必須的,這個文件的用處是在打包完畢之后,通過啟動node.js本地服務(wù)來訪問打包完成的靜態(tài)文件,不需要的同學(xué)可以忽略這一點(diǎn),
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標(biāo)簽引入的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文件中引用圖片,如果是靜態(tài)引用,直接寫相對路徑,如果是動態(tài)引用,需要這樣寫
靜態(tài)引用,直接寫相對路徑:
<img src="../../base/img/home/me.jpg" class="round"/>
動態(tài)引用,需要require獲取動態(tài)路徑:
<img :src="logo" class="logo-img" @click="toggleMenu"/>
computed:{ logo(){ return require(`../../base/img/logo/logo${this.currentImg}.png`); } }
同樣的動態(tài)設(shè)置背景圖片也需要動態(tài)獲取文件路徑;
<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開發(fā)的話,打包之后,直接打開index.html之后會報錯,有兩個字體文件引入失敗,但是我這里是沒有手動引入這兩個文件的,最后百度到解決辦法是,在webpack.prod.conf.js中設(shè)置module.rules中的extract為false;詳情見這個issue:https://github.com/iview/iview/issues/515
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用Echarts實(shí)現(xiàn)橫向柱狀圖,并通過WebSocket即時通訊更新
這篇文章主要介紹了Vue使用Echarts實(shí)現(xiàn)橫向柱狀圖,并通過WebSocket即時通訊更新方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03.netcore+vue 實(shí)現(xiàn)壓縮文件下載功能
這篇文章主要介紹了.netcore+vue 實(shí)現(xiàn)壓縮文件下載功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09Vue實(shí)現(xiàn)雙token無感刷新的示例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)雙token無感刷新,雙token機(jī)制,尤其是指在OAuth 2.0授權(quán)協(xié)議中廣泛使用的access token(訪問令牌)和refresh token(刷新令牌)組合,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03ElementUI級聯(lián)選擇器實(shí)現(xiàn)同一父級下最多只能選中一個子級
本文主要介紹了ElementUI級聯(lián)選擇器實(shí)現(xiàn)同一父級下最多只能選中一個子級,同一父級下的子節(jié)點(diǎn)單選,又可以選擇多個不同父級下的節(jié)點(diǎn),具有一定參考價值,感興趣的可以了解一下2023-10-10vue3.0實(shí)現(xiàn)復(fù)選框組件的封裝
這篇文章主要為大家詳細(xì)介紹了vue3.0實(shí)現(xiàn)復(fù)選框組件的封裝代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09Vue3?$emit用法指南(含選項(xiàng)API、組合API及?setup?語法糖)
這篇文章主要介紹了Vue3?$emit用法指南,使用?emit,我們可以觸發(fā)事件并將數(shù)據(jù)傳遞到組件的層次結(jié)構(gòu)中,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07