臨時(shí)純手工搭建開發(fā)了個(gè)vue2小項(xiàng)目，打包后出現(xiàn)了很多問題
一、打包后index.html打開空白
打包后整個(gè)頁面空白，是因?yàn)榇虬筚Y源路徑不對(duì)，需要修改config->index.js下，build屬性中assetsPublicPath值為./
module.exports = {
dev:{...},
build:{
...
assetsPublicPath: './',//默認(rèn)是'/'，需要改為./
...
}
}
二、打包后圖片等靜態(tài)資源無法顯示
需要修改build下utils.js文件，新增一句話，大致位置如下，重點(diǎn)看注釋處提示：文章來源：http://www.zghlxwxcb.cn/news/detail-597193.html
...
exports.cssLoaders = function (options) {
...
function generateLoaders (loader, loaderOptions) {
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
,publicPath:'../../' //新增的部分
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
三、打包后凡是router-view的地方都沒有加載
打開dist中html文件，打開控制臺(tái)檢查，會(huì)發(fā)現(xiàn)該顯示router-view的地方?jīng)]有元素，只有一個(gè)空注釋<!---->
需要修改router的默認(rèn)mode值（默認(rèn)為hsiotry），改成hash模式文章來源地址http://www.zghlxwxcb.cn/news/detail-597193.html
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter)
const routes = [
...
]
const router = new VueRouter({
routes,
mode:"hash" //框架默認(rèn)生成時(shí)，這里是值為hsitory
})
export default router
到了這里，關(guān)于vue2項(xiàng)目打包遇到的問題（記錄）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
