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