Vue打包路徑怎么配置

今天小編給大家分享一下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結合時的坑

最近用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文件中的樣板地址不就可以了，于是按這樣做了并且頁面顯示出來了，但頁面跳轉時又出錯了，明明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中，運行。

問題解決。

以上就是“Vue打包路徑怎么配置”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。