專案中遇到打包之後靜態資源路徑找不到，報如下錯誤：

解決方法是：

在專案的根目錄下建立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'); //Gzip
const 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",// }
 },// 第三方外掛配置 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打包上線靜態資源找不到路徑的解決操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。