Vue打包路徑配置過(guò)程
Vue打包路徑配置
1. 配置文件
module.exports = {
// ......
// 相對(duì)路徑都是相對(duì)于index.js所在的目錄config開始的
build: {
// index,assetsRoot兩個(gè)路徑基本不用改動(dòng)，只是用于文件打包存放的路徑
// index.html的路徑
index: path.resolve(__dirname, '../dist/index.html'),
// js,css,fonts夾等資源的路徑
assetsRoot: path.resolve(__dirname, '../dist'),
// 下面這種寫法指定靜態(tài)文件 js/css夾等與index平級(jí)
// 指定為'/' 會(huì)打包會(huì)出現(xiàn)錯(cuò)誤，最高只能指定到當(dāng)前目錄'./' 指定目錄不存在會(huì)自動(dòng)創(chuàng)建
// 也就是說(shuō)js,css文件夾的路徑其實(shí)是上面的: '../dist' + assetsSubDirectory
assetsSubDirectory: 'static',
// index.html中引用資源的前綴
// 相當(dāng)于static/js/app.js的前綴 eg： ./static/js... /static/js.....
assetsPublicPath: '/',
// ......
}
}2. 打包示例(npm/cnpm run build)
2.1 index.html
index: path.resolve(__dirname, '../dist/index.html')
index: path.resolve(__dirname, '../dist/f1/index.html')
2.2 assetsRoot, assetsSubDirectory
// 不指定 assetsSubDirectory assetsRoot: path.resolve(__dirname, '../dist')， assetsSubDirectory: ''
// 指定 assetsSubDirectory assetsRoot: path.resolve(__dirname, '../dist')， assetsSubDirectory: 'static'
2.3 assetsPublicPath
assetsPublicPath: '/'
// 會(huì)自動(dòng)補(bǔ)末尾的'/', '/temp'和'/temp/'都可以 assetsPublicPath: '/temp/'
Ps:
- 打包出來(lái)index.html屬性，路徑不帶雙引號(hào)，可能會(huì)報(bào)錯(cuò)
- meta標(biāo)簽沒(méi)有閉合 可能會(huì)報(bào)錯(cuò)
- 在打包到SpringBoot resources/static時(shí)，按第一點(diǎn)的默認(rèn)配置打包，然后將dist下的所有文件/文件夾直接復(fù)制到resources/static下。
解決打包路徑配置的問(wèn)題
vue.cli3與flask或django結(jié)合時(shí)的坑
最近用vue以及flask做一個(gè)小項(xiàng)目，但自己是個(gè)新手出現(xiàn)了許多問(wèn)題，其中一個(gè)就是下面都這樣的。
問(wèn)題
vue.cli3打包好的dist文件放入django或flask中時(shí)，會(huì)出現(xiàn)找不到頁(yè)面的情況而出現(xiàn)空白頁(yè)。
原因
django或flask中設(shè)置的樣板文件地址都是指定的static文件夾，而vue.cli3中打包好的dist文件夾中js，css文件是分別存放于與static文件夾，index.html文件同級(jí)的js，css文件夾中，這樣就導(dǎo)致了在flask或django中找不到了vue的樣板，從而導(dǎo)致了出現(xiàn)空白頁(yè)的情況。
解決
既然文件地址不對(duì)，那把文件夾移到static文件夾下再更改一下index.html文件中的樣板地址不就可以了，于是按這樣做了并且頁(yè)面顯示出來(lái)了，但頁(yè)面跳轉(zhuǎn)時(shí)又出錯(cuò)了，明明vue-route里設(shè)置對(duì)了，并且npm run serve時(shí)也通過(guò)了，為什么出現(xiàn)了token錯(cuò)誤？現(xiàn)在還沒(méi)有整明白。
這樣手動(dòng)改很麻煩而且也不行，于是就從打包時(shí)下手解決。如下圖添加config文件。（config文件在vue.cli3中是可手動(dòng)添加的文件，官網(wǎng)描述）
然后在里面寫入下面的語(yǔ)句：
module.exports = {
assetsDir: 'static'
}再次打包，就會(huì)發(fā)現(xiàn)js，css文件都打包進(jìn)了static文件中了。
再次把static文件放入flask中，運(yùn)行。
問(wèn)題解決。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue父組件向子組件(props)傳遞數(shù)據(jù)的方法
這篇文章主要介紹了vue父組件向子組件(props)傳遞數(shù)據(jù)的方法,文中給大家補(bǔ)充介紹了vue父子組件間傳值(props)的實(shí)現(xiàn)代碼，需要的朋友可以參考下2018-01-01
這篇文章主要介紹了如何使用 vue + d3 畫一棵樹,本文通過(guò)文字說(shuō)明加代碼分析的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
vue中axios的get請(qǐng)求和post請(qǐng)求的傳參方式、攔截器示例代碼
Post是向服務(wù)器提交數(shù)據(jù)的一種請(qǐng)求,get是向服務(wù)器發(fā)索取數(shù)據(jù)的一種請(qǐng)求,post在真正接受數(shù)據(jù)之前會(huì)先將請(qǐng)求頭發(fā)送給服務(wù)器進(jìn)行確認(rèn),然后才真正發(fā)送數(shù)據(jù),本文給大家介紹vue中axios的get請(qǐng)求和post請(qǐng)求的傳參方式、攔截器示例代碼,感興趣的朋友一起看看吧2023-10-10
基于Vue-Cli 打包自動(dòng)生成/抽離相關(guān)配置文件的實(shí)現(xiàn)方法
基于Vue-cli 項(xiàng)目產(chǎn)品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，極大的降低了效率。這篇文章主要介紹了基于Vue-Cli 打包自動(dòng)生成/抽離相關(guān)配置文件 ,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了vue綁定class與行間樣式style的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
父子組件通訊是指在前端開發(fā)的組件化架構(gòu)中,父組件與子組件之間互相傳遞數(shù)據(jù)和觸發(fā)功能的一種機(jī)制,這種機(jī)制使得組件能夠保持獨(dú)立性的同時(shí),也能協(xié)同工作,本文給大家介紹了Vue父子組件通訊的四種方法,需要的朋友可以參考下2024-07-07
keep-alive是Vue中一個(gè)非常有用的特性,它可以幫助我們避免重復(fù)渲染和減少組件的渲染次數(shù),從而提高應(yīng)用程序的性能,本文給大家介紹keep-alive組件緩存的相關(guān)知識(shí),感興趣的朋友一起看看吧2024-01-01
如何啟動(dòng)一個(gè)Vue.js項(xiàng)目
這篇文章主要介紹了如何啟動(dòng)一個(gè)Vue.js項(xiàng)目，對(duì)Vue.js感興趣的同學(xué)，可以參考下2021-04-04
vue+moment實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了vue+moment實(shí)現(xiàn)倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要為大家介紹了Vue.nextTick使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07