vue-cli 項(xiàng)目打包完成后運(yùn)行文件路徑報(bào)錯(cuò)問題
本文介紹了vue-cli 項(xiàng)目打包完成后運(yùn)行文件路徑報(bào)錯(cuò)問題，做個(gè)筆記，也分享給大家。
剛新建的vue-cli項(xiàng)目，同事說要打包一版進(jìn)行測試，打包完成后放在tomcat上發(fā)現(xiàn)路徑報(bào)錯(cuò)問題。
百度了一下，懷疑是build里面沒有定義路徑問題，度友提供了解決方案：
找到config文件夾下的index.js文件，修改路徑代碼
找到build對象，修改屬性assetsPublicPath為 ‘./'
但是由于vue-cli項(xiàng)目中已經(jīng)沒有config文件夾，需要在根目錄下創(chuàng)建vue.config.js
具體配置網(wǎng)上查了一下，用了一個(gè)推薦的配置：
module.exports = {
baseUrl: '/',
outputDir: 'dist',
lintOnSave: true,
runtimeCompiler: true, //關(guān)鍵點(diǎn)在這
// 調(diào)整內(nèi)部的 webpack 配置。
// 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// 配置 webpack-dev-server 行為。
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
// 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
proxy: null, // string | Object
before: app => {}
}
}
但是這個(gè)配置打包完之后依舊報(bào)錯(cuò)，看了原因，是baseUrl: '/'的路徑還是有問題，把路徑改為baseUrl: './'就能找到對應(yīng)的路徑了，以下為修改后代碼：
module.exports = {
baseUrl: './',
outputDir: 'dist',
lintOnSave: true,
runtimeCompiler: true, //關(guān)鍵點(diǎn)在這
// 調(diào)整內(nèi)部的 webpack 配置。
// 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// 配置 webpack-dev-server 行為。
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
// 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
proxy: null, // string | Object
before: app => {}
}
}
結(jié)果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目element?UI?版本升級過程遇到的問題及解決方案
這篇文章主要介紹了vue項(xiàng)目element?UI?版本升級過程遇到的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié))
這篇文章主要介紹了VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié))，文中通過圖文表格介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
在Vue項(xiàng)目中,通過.env文件配置環(huán)境變量,支持不同環(huán)境下加載不同配置,Vite通過import.meta.env向應(yīng)用暴露環(huán)境變量,支持基本URL、開發(fā)環(huán)境和生產(chǎn)環(huán)境識別等,.env文件可設(shè)置環(huán)境優(yōu)先級,修改后需重啟生效,TypeScript可通過增加文件獲取智能提示2024-10-10
這篇文章主要給大家介紹了關(guān)于vue3中如何使用d3.js繪制流程圖的相關(guān)資料,D3.js是由javaScript語言編寫繪圖庫,其原理是通過調(diào)用一系列內(nèi)置函數(shù),生成SVG,并在網(wǎng)頁渲染,需要的朋友可以參考下2023-10-10
Vue.js計(jì)算屬性computed與watch（5）
這篇文章主要為大家詳細(xì)介紹了Vue.js計(jì)算屬性computed與watch,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
微信小程序地圖導(dǎo)航功能實(shí)現(xiàn)完整源代碼附效果圖（推薦）
這篇文章主要介紹了微信小程序地圖導(dǎo)航功能實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue項(xiàng)目打包到服務(wù)器后請求接口報(bào)錯(cuò)404的解決
這篇文章主要介紹了Vue項(xiàng)目打包到服務(wù)器后請求接口報(bào)錯(cuò)404的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細(xì)介紹了vue3中展示markdown格式文章的三種形式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
vue-router如何實(shí)現(xiàn)history模式配置
這篇文章主要介紹了vue-router如何實(shí)現(xiàn)history模式配置，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Element-plus封裝搜索組件的實(shí)現(xiàn)
在后臺管理系統(tǒng)中,經(jīng)常需要在多個(gè)頁面中使用搜索功能,本文就來介紹一下Element-plus封裝搜索組件的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08