vue cli3.0打包上線靜態(tài)資源找不到路徑的解決操作
項(xiàng)目中遇到打包之后靜態(tài)資源路徑找不到,報(bào)如下錯(cuò)誤:
解決方法是:
在項(xiàng)目的根目錄下創(chuàng)建vue.config,js文件,在里面配置靜態(tài)資源的路徑,publicPath是配置靜態(tài)資源路徑的屬性,vue.config,js文件的代碼如下:
module.exports = { publicPath: './' }
補(bǔ)充知識(shí):vue-cli3 npm run build 打包后靜態(tài)資源的配置 vue.config.js的配置
vue.config.js配置如下:
const path = require('path'); const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移動(dòng)端模擬開發(fā)者工具 插件 (另:https://github.com/liriliri/eruda) const CompressionPlugin = require('compression-webpack-plugin'); //Gzip const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //Webpack包文件分析器 const baseUrl = process.env.NODE_ENV === "production" ? "/static/" : "/"; //font scss資源路徑 不同環(huán)境切換控制 module.exports = { //基本路徑 baseUrl: './', //輸出文件目錄 outputDir: 'dist', // eslint-loader 是否在保存的時(shí)候檢查 lintOnSave: true, //放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對(duì)于 outputDir 的) 目錄。 assetsDir: 'static', //以多頁模式構(gòu)建應(yīng)用程序。 pages: undefined, //是否使用包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本 runtimeCompiler: false, //是否為 Babel 或 TypeScript 使用 thread-loader。該選項(xiàng)在系統(tǒng)的 CPU 有多于一個(gè)內(nèi)核時(shí)自動(dòng)啟用,僅作用于生產(chǎn)構(gòu)建,在適當(dāng)?shù)臅r(shí)候開啟幾個(gè)子進(jìn)程去并發(fā)的執(zhí)行壓縮 parallel: require('os').cpus().length > 1, //生產(chǎn)環(huán)境是否生成 sourceMap 文件,一般情況不建議打開 productionSourceMap: false, // webpack配置 //對(duì)內(nèi)部的 webpack 配置進(jìn)行更細(xì)粒度的修改 https://github.com/neutrinojs/webpack-chain see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: config => { /** * 刪除懶加載模塊的prefetch,降低帶寬壓力 * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch * 而且預(yù)渲染時(shí)生成的prefetch標(biāo)簽是modern版本的,低版本瀏覽器是不需要的 */ // config.plugins.delete('prefetch'); // if(process.env.NODE_ENV === 'production') { // 為生產(chǎn)環(huán)境修改配置...process.env.NODE_ENV !== 'development' // } else {// 為開發(fā)環(huán)境修改配置... // } }, //調(diào)整 webpack 配置 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F configureWebpack: config => { //生產(chǎn)and測(cè)試環(huán)境 let pluginsPro = [ new CompressionPlugin({ //文件開啟Gzip,也可以通過服務(wù)端(如:nginx)(https://github.com/webpack-contrib/compression-webpack-plugin) filename: '[path].gz[query]', algorithm: 'gzip', test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$', ), threshold: 8192, minRatio: 0.8, }), // Webpack包文件分析器(https://github.com/webpack-contrib/webpack-bundle-analyzer) new BundleAnalyzerPlugin(), ]; //開發(fā)環(huán)境 let pluginsDev = [ //移動(dòng)端模擬開發(fā)者工具(https://github.com/diamont1001/vconsole-webpack-plugin https://github.com/Tencent/vConsole) new vConsolePlugin({ filter: [], // 需要過濾的入口文件 enable: false // 發(fā)布代碼前記得改回 false }), ]; if(process.env.NODE_ENV === 'production') { // 為生產(chǎn)環(huán)境修改配置...process.env.NODE_ENV !== 'development' config.plugins = [...config.plugins, ...pluginsPro]; } else { // 為開發(fā)環(huán)境修改配置... config.plugins = [...config.plugins, ...pluginsDev]; } }, css: { // 啟用 CSS modules modules: false, // 是否使用css分離插件 extract: true, // 開啟 CSS source maps,一般不建議開啟 sourceMap: false, // css預(yù)設(shè)器配置項(xiàng) loaderOptions: { sass: { //設(shè)置css中引用文件的路徑,引入通用使用的scss文件(如包含的@mixin) data: ` $baseUrl: "/"; ` } } }, // webpack-dev-server 相關(guān)配置 https://webpack.js.org/configuration/dev-server/ devServer: { host: 'localhost', // host: "0.0.0.0", port: 8000, // 端口號(hào) https: false, // https:{type:Boolean} open: true, //配置自動(dòng)啟動(dòng)瀏覽器 http://XXX.XXX.X.XX:7071/rest/XXX/ hotOnly: true, // 熱更新 proxy: 'http://localhost:8000' // 配置跨域處理,只有一個(gè)代理 // proxy: { //配置自動(dòng)啟動(dòng)瀏覽器 // "/XX/*": { // target: "http://XXX.XXX.X.XX", // changeOrigin: true, // // ws: true,//websocket支持 // secure: false // }, // "/x/*": { // target: "http://XXX.XXX.X.XX", // changeOrigin: true, // // ws: true,//websocket支持 // secure: false // }, // } }, // 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader pluginOptions: { 'style-resources-loader': {//https://github.com/yenshih/style-resources-loader preProcessor: 'scss',//聲明類型 'patterns': [ // path.resolve(__dirname, './src/assets/scss/_common.scss'), ], // injector: 'append' } } };
以上這篇vue cli3.0打包上線靜態(tài)資源找不到路徑的解決操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue 3項(xiàng)目如何安裝Element-Plus
Element Plus 是一個(gè)基于 Vue 3 的現(xiàn)代前端UI框架,它旨在提升開發(fā)體驗(yàn),并為開發(fā)者提供高效、優(yōu)雅的組件,在本文中將詳細(xì)介紹如何在 Vue 3 項(xiàng)目中安裝 Element Plus,感興趣的朋友一起看看吧2024-07-07Vue3在Setup中使用axios請(qǐng)求獲取的值方式
這篇文章主要介紹了Vue3在Setup中使用axios請(qǐng)求獲取的值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06vue中動(dòng)態(tài)路由加載組件,找不到module問題及解決
這篇文章主要介紹了vue中動(dòng)態(tài)路由加載組件,找不到module問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06vue實(shí)現(xiàn)聯(lián)動(dòng)選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)聯(lián)動(dòng)選擇,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vue搜索頁開發(fā)實(shí)例代碼詳解(熱門搜索,歷史搜索,淘寶接口演示)
這篇文章主要介紹了vue搜索頁開發(fā)實(shí)例(熱門搜索,歷史搜索,淘寶接口演示),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動(dòng)態(tài)綁定問題
今天小編就為大家分享一篇關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動(dòng)態(tài)綁定問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09