vue項(xiàng)目打包到上線的基礎(chǔ)做法總結(jié)
1不恭、開發(fā)環(huán)境到生產(chǎn)環(huán)境的轉(zhuǎn)變
項(xiàng)目開發(fā)結(jié)束之后叶雹，首先我們需要通知后端，獲取一個(gè)線上的路徑县袱，之后將之前的開發(fā)路徑切換為線上路徑浑娜。
打開項(xiàng)目中config文件夾里面的 dev.env.js 文件佑力。
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
// BASE_API: '"http://192.168.1.***:3838/"' //開發(fā)者路徑
BASE_API: '"http://sdk.********.cn:3838/"' //線上路徑式散，替換開發(fā)者路徑
})
打開項(xiàng)目中config文件夾里面的prod.env.js 文件，將后端給的線上路徑填入打颤。
'use strict'
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"http://sdk.*********.cn:3838/"' //線上路徑
}
2暴拄、設(shè)置統(tǒng)一的請求路徑
猶豫項(xiàng)目打包之后，所有的js编饺，css乖篷，圖片都會(huì)在各自統(tǒng)一的文件夾內(nèi)，所以透且，之前的路徑需要改掉撕蔼，單個(gè)修改花費(fèi)時(shí)間太長，那么應(yīng)該怎么做呢秽誊。
打開build文件夾里面的utils.js鲸沮，根據(jù)需求添加，通常會(huì)添加兩個(gè)../锅论。
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath : '../../' //新添加的內(nèi)容讼溺，路徑配置
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
在某種情況下，會(huì)出現(xiàn)html主路徑引入不正確的問題最易，這時(shí)候我們需要配置config文件夾內(nèi)部的index.js文件,修改assetsPublicPath怒坯，注意，這里的assetsPublicPath是build生產(chǎn)環(huán)境下的assetsPublicPath路徑藻懒，而不是dev開發(fā)環(huán)境下的assetsPublicPath剔猿。
image.png
這個(gè)時(shí)候，就可以執(zhí)行 npm run build 將項(xiàng)目打包嬉荆，置于你們后端上線了归敬。祝各位早日成為前端大牛，喜歡的點(diǎn)關(guān)注了親親员寇！
qinqin.gif
