Vue打包路徑配置過(guò)程
Vue打包路徑配置
1. 配置文件
module.exports = {
// ......
// 相對(duì)路徑都是相對(duì)于index.js所在的目錄config開(kāi)始的
build: {
// index,assetsRoot兩個(gè)路徑基本不用改動(dòng)，只是用于文件打包存放的路徑
// index.html的路徑
index: path.resolve(__dirname, '../dist/index.html'),
// js,css,fonts夾等資源的路徑
assetsRoot: path.resolve(__dirname, '../dist'),
// 下面這種寫(xiě)法指定靜態(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)描述）
然后在里面寫(xiě)入下面的語(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 mint-ui源碼解析之loadmore組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
使用ElementUI修改el-tabs標(biāo)簽頁(yè)組件樣式
這篇文章主要介紹了使用ElementUI修改el-tabs標(biāo)簽頁(yè)組件樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue控制多行文字展開(kāi)收起的實(shí)現(xiàn)示例
這篇文章主要介紹了vue控制多行文字展開(kāi)收起的實(shí)現(xiàn)示例（也叫控制文字展開(kāi)隱藏），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue項(xiàng)目打包是我們?nèi)粘＝?jīng)常遇到的,下面這篇文章主要給大家介紹了關(guān)于Vue打包后不同版本詳細(xì)解析的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue中 v-for循環(huán)的用法詳解,本文通過(guò)實(shí)例代碼的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
這篇文章主要介紹了詳解element-ui中表單驗(yàn)證的三種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue實(shí)現(xiàn)半自動(dòng)打字機(jī)特效
本文主要介紹了Vue實(shí)現(xiàn)半自動(dòng)打字機(jī)特效,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
這篇文章主要介紹了vue組件文檔生成備注詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
antd Form組件方法getFieldsValue獲取自定義組件的值操作
這篇文章主要介紹了antd Form組件方法getFieldsValue獲取自定義組件的值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了Vue 的鉤子函數(shù)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09