欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue打包路徑配置過程

 更新時間:2022年07月26日 14:33:31   作者:CodingBugs  
這篇文章主要介紹了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)錯誤,最高只能指定到當前目錄'./'  指定目錄不存在會自動創(chuàng)建
    // 也就是說js,css文件夾的路徑其實是上面的: '../dist' + assetsSubDirectory
    assetsSubDirectory: 'static',
    // index.html中引用資源的前綴
    // 相當于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: '/'

// 會自動補末尾的'/', '/temp'和'/temp/'都可以
assetsPublicPath: '/temp/'

Ps:

  • 打包出來index.html屬性,路徑不帶雙引號,可能會報錯
  • meta標簽沒有閉合 可能會報錯
  • 在打包到SpringBoot resources/static時,按第一點的默認配置打包,然后將dist下的所有文件/文件夾直接復制到resources/static下。

解決打包路徑配置的問題

vue.cli3與flask或django結(jié)合時的坑

最近用vue以及flask做一個小項目,但自己是個新手出現(xiàn)了許多問題,其中一個就是下面都這樣的。

問題

vue.cli3打包好的dist文件放入django或flask中時,會出現(xiàn)找不到頁面的情況而出現(xiàn)空白頁。

原因

django或flask中設置的樣板文件地址都是指定的static文件夾,而vue.cli3中打包好的dist文件夾中js,css文件是分別存放于與static文件夾,index.html文件同級的js,css文件夾中,這樣就導致了在flask或django中找不到了vue的樣板,從而導致了出現(xiàn)空白頁的情況。

解決

既然文件地址不對,那把文件夾移到static文件夾下再更改一下index.html文件中的樣板地址不就可以了,于是按這樣做了并且頁面顯示出來了,但頁面跳轉(zhuǎn)時又出錯了,明明vue-route里設置對了,并且npm run serve時也通過了,為什么出現(xiàn)了token錯誤?現(xiàn)在還沒有整明白。

這樣手動改很麻煩而且也不行,于是就從打包時下手解決。如下圖添加config文件。(config文件在vue.cli3中是可手動添加的文件,官網(wǎng)描述

然后在里面寫入下面的語句:

	module.exports = {
	    assetsDir: 'static'
	}

再次打包,就會發(fā)現(xiàn)js,css文件都打包進了static文件中了。

再次把static文件放入flask中,運行。

問題解決。

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 詳解vue mint-ui源碼解析之loadmore組件

    詳解vue mint-ui源碼解析之loadmore組件

    本篇文章主要介紹了vue mint-ui源碼解析之loadmore組件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • 使用ElementUI修改el-tabs標簽頁組件樣式

    使用ElementUI修改el-tabs標簽頁組件樣式

    這篇文章主要介紹了使用ElementUI修改el-tabs標簽頁組件樣式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue控制多行文字展開收起的實現(xiàn)示例

    vue控制多行文字展開收起的實現(xiàn)示例

    這篇文章主要介紹了vue控制多行文字展開收起的實現(xiàn)示例(也叫控制文字展開隱藏),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-10-10
  • Vue打包后不同版本詳細解析

    Vue打包后不同版本詳細解析

    vue項目打包是我們?nèi)粘=?jīng)常遇到的,下面這篇文章主要給大家介紹了關(guān)于Vue打包后不同版本詳細解析的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2022-12-12
  • vue中 v-for循環(huán)的用法詳解

    vue中 v-for循環(huán)的用法詳解

    這篇文章主要介紹了vue中 v-for循環(huán)的用法詳解,本文通過實例代碼的形式給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-02
  • 詳解element-ui中表單驗證的三種方式

    詳解element-ui中表單驗證的三種方式

    這篇文章主要介紹了詳解element-ui中表單驗證的三種方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-09-09
  • Vue實現(xiàn)半自動打字機特效

    Vue實現(xiàn)半自動打字機特效

    本文主要介紹了Vue實現(xiàn)半自動打字機特效,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-12-12
  • vue組件文檔生成備注詳解

    vue組件文檔生成備注詳解

    這篇文章主要介紹了vue組件文檔生成備注詳解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • antd Form組件方法getFieldsValue獲取自定義組件的值操作

    antd Form組件方法getFieldsValue獲取自定義組件的值操作

    這篇文章主要介紹了antd Form組件方法getFieldsValue獲取自定義組件的值操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • 深入理解Vue 的鉤子函數(shù)

    深入理解Vue 的鉤子函數(shù)

    這篇文章主要介紹了Vue 的鉤子函數(shù),本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-09-09

最新評論