vue項目打包發(fā)布上線的方法步驟
vue項目開發(fā)完成后，我們需要將項目打包上線，同時我們希望可以在本地預(yù)覽生產(chǎn)環(huán)境項目
（以vue-cli腳手架生成的項目為例）
一、開發(fā)環(huán)境到生產(chǎn)環(huán)境的轉(zhuǎn)變
項目開發(fā)結(jié)束之后，首先我們需要通知后端，獲取一個線上的路徑，之后將之前的開發(fā)路徑切換為線上路徑。
打開項目中config文件夾里面的 dev.env.js 文件，將后端給的線上路徑填入。
'use strict'
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"http://sdk.*********.cn:3838/"' //線上路徑
}
二、設(shè)置統(tǒng)一的請求路徑
猶豫項目打包之后，所有的js，css，圖片都會在各自統(tǒng)一的文件夾內(nèi)，所以，之前的路徑需要改掉，單個修改花費時間太長，那么應(yīng)該怎么做呢。
打開build文件夾里面的utils.js，根據(jù)需求添加，通常會添加兩個../。
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath : '../../' //新添加的內(nèi)容，路徑配置
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
在某種情況下，會出現(xiàn)html主路徑引入不正確的問題，這時候我們需要配置config文件夾內(nèi)部的index.js文件,修改assetsPublicPath，注意，這里的assetsPublicPath是build生產(chǎn)環(huán)境下的assetsPublicPath路徑，而不是dev開發(fā)環(huán)境下的assetsPublicPath。
三、運行打包命令
npm run build //一般情況如果不改的話都是build
運行后的結(jié)果如上：
運行后生成 dist 文件夾
到此這篇關(guān)于vue項目打包發(fā)布上線的方法步驟的文章就介紹到這了,更多相關(guān)vue項目打包發(fā)布上線內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS數(shù)組Array常用方法匯總和實例,JavaScript創(chuàng)建數(shù)組的方式,找數(shù)組元素,數(shù)組去重,實現(xiàn)數(shù)組排序需要的朋友可以參考下2022-05-05
element?UI中el-dialog實現(xiàn)拖拽功能示例代碼
我們在開發(fā)中常會遇見拖拽的功能,下面這篇文章主要給大家介紹了關(guān)于element?UI中el-dialog實現(xiàn)拖拽功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)登錄滑動拼圖驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue如何封裝自己的Svg圖標(biāo)組件庫(svg-sprite-loader)
這篇文章主要介紹了vue如何封裝自己的Svg圖標(biāo)組件庫(svg-sprite-loader)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家分享了vue開發(fā)心得和技巧,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
本篇文章主要介紹了基于vue實現(xiàn)swipe分頁組件實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
說說如何在Vue.js中實現(xiàn)數(shù)字輸入組件的方法
這篇文章主要介紹了說說如何在Vue.js中實現(xiàn)數(shù)字輸入組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
今天小編就為大家分享一篇vue 實現(xiàn)購物車總價計算，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue echart實現(xiàn)柱狀圖,電池圖,3D柱圖和3D圓柱圖代碼詳解
這篇文章主要為大家介紹了Vue實現(xiàn)echart繪圖代碼詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別
本文主要介紹了淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07