項目中遇到打包之后靜態資源路徑找不到，報如下錯誤：

解決方法是：

在項目的根目錄下創建vue.config,js文件，在里面配置靜態資源的路徑，publicPath是配置靜態資源路徑的屬性，vue.config,js文件的代碼如下：

module.exports = { publicPath: ’./’}

補充知識：vue-cli3 npm run build 打包后靜態資源的配置 vue.config.js的配置

vue.config.js配置如下：

const path = require(’path’);const vConsolePlugin = require(’vconsole-webpack-plugin’); // 引入 移動端模擬開發者工具 插件 （另：https://github.com/liriliri/eruda）const CompressionPlugin = require(’compression-webpack-plugin’); //Gzipconst BundleAnalyzerPlugin = require(’webpack-bundle-analyzer’).BundleAnalyzerPlugin; //Webpack包文件分析器const baseUrl = process.env.NODE_ENV === 'production' ? '/static/' : '/'; //font scss資源路徑 不同環境切換控制 module.exports = { //基本路徑 baseUrl: ’./’, //輸出文件目錄 outputDir: ’dist’, // eslint-loader 是否在保存的時候檢查 lintOnSave: true, //放置生成的靜態資源 (js、css、img、fonts) 的 (相對于 outputDir 的) 目錄。 assetsDir: ’static’, //以多頁模式構建應用程序。 pages: undefined, //是否使用包含運行時編譯器的 Vue 構建版本 runtimeCompiler: false, //是否為 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多于一個內核時自動啟用，僅作用于生產構建，在適當的時候開啟幾個子進程去并發的執行壓縮 parallel: require(’os’).cpus().length > 1, //生產環境是否生成 sourceMap 文件，一般情況不建議打開 productionSourceMap: false, // webpack配置 //對內部的 webpack 配置進行更細粒度的修改 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 * 而且預渲染時生成的prefetch標簽是modern版本的，低版本瀏覽器是不需要的 */ // config.plugins.delete(’prefetch’); // if(process.env.NODE_ENV === ’production’) { // 為生產環境修改配置...process.env.NODE_ENV !== ’development’ // } else {// 為開發環境修改配置... // } }, //調整 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 => { //生產and測試環境 let pluginsPro = [ new CompressionPlugin({ //文件開啟Gzip，也可以通過服務端(如：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(), ]; //開發環境 let pluginsDev = [ //移動端模擬開發者工具(https://github.com/diamont1001/vconsole-webpack-plugin https://github.com/Tencent/vConsole) new vConsolePlugin({ filter: [], // 需要過濾的入口文件 enable: false // 發布代碼前記得改回 false }), ]; if(process.env.NODE_ENV === ’production’) { // 為生產環境修改配置...process.env.NODE_ENV !== ’development’ config.plugins = [...config.plugins, ...pluginsPro]; } else { // 為開發環境修改配置... config.plugins = [...config.plugins, ...pluginsDev]; } }, css: { // 啟用 CSS modules modules: false, // 是否使用css分離插件 extract: true, // 開啟 CSS source maps，一般不建議開啟 sourceMap: false, // css預設器配置項 loaderOptions: { sass: { //設置css中引用文件的路徑，引入通用使用的scss文件（如包含的@mixin） data: ` $baseUrl: '/'; ` } } }, // webpack-dev-server 相關配置 https://webpack.js.org/configuration/dev-server/ devServer: { host: ’localhost’, // host: '0.0.0.0', port: 8000, // 端口號 https: false, // https:{type:Boolean} open: true, //配置自動啟動瀏覽器 http://XXX.XXX.X.XX:7071/rest/XXX/ hotOnly: true, // 熱更新 proxy: ’http://localhost:8000’ // 配置跨域處理,只有一個代理 // proxy: { //配置自動啟動瀏覽器 // '/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打包上線靜態資源找不到路徑的解決操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。