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)文章
這篇文章主要介紹了Vue和React的相同點不不同點，文中對比介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-05-05
element-plus按需引入后ElMessage與ElLoading在頁面中的使用
這篇文章主要介紹了element-plus按需引入后ElMessage與ElLoading在頁面中的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue對Element中的el-tag添加@click事件無效的解決
本文主要介紹了Vue對Element中的el-tag添加@click事件無效的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了Vue組件傳值過程接收不成功的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了vue項目配置代理如何解決跨域問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了Vue.js列表渲染綁定jQuery插件的正確姿勢，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了vue+canvas實現(xiàn)移動端手寫簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
vue數(shù)據(jù)push后不能響應(yīng)式更新的問題
這篇文章主要介紹了vue數(shù)據(jù)push后不能響應(yīng)式更新的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue 中 onclick和@click區(qū)別,簡單點說就是onclick 只能觸發(fā) js的原生方法,不能觸發(fā)vue的封裝方法,@click 只能觸發(fā)vue的封裝方法,不能觸發(fā)js的原生方法,需要的朋友可以參考下2024-02-02
Vue 使用高德地圖添加點標(biāo)記 + 點擊地圖獲取坐標(biāo) + 帶搜索(即地
這篇文章主要介紹了Vue 使用高德地圖添加點標(biāo)記 + 點擊地圖獲取坐標(biāo) + 帶搜索(即地理編碼 + 逆地理編碼) 附完整示例,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-01-01