vue3項目打包後出現頁面資源加載不到問題

在vue項目的根目錄下要自己創建vue.config.js:

module.exports = {

    // 部署應用包時的基本 URL

    publicPath: process.env.NODE_ENV === 'production'

      ? 'ip地址（此為打包後dist文件位置）'

      : '/',

      

    // 運行 vue-cli-service build 時生成的生產環境構建文件的目錄

    // 默認構建前清除文件夾(構建時傳入 --no-clean 可關閉該行爲

    outputDir: 'dist',

  

    // 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄

    assetsDir: 'static',

  

    // 指定生成的 index.html 的輸出路徑 (相對於 outputDir),也可以是一個絕對路徑

    indexPath: 'index.html',

  

    // 生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存

    filenameHashing: true,

  

    // 當在 multi-page 模式下構建時，webpack 配置會包含不一樣的插件

    // (這時會存在多個 html-webpack-plugin 和 preload-webpack-plugin 的實例)。

    // 如果你試圖修改這些插件的選項，請確認運行 vue inspect

 

    

    // eslint-loader 是否在保存的時候檢查

    lintOnSave: true,

  

    // 是否使用包含運行時編譯器的Vue核心的構建

    runtimeCompiler: false,

  

    // 默認情況下 babel-loader 忽略其中的所有文件 node_modules，

    // 想要通過 Babel 顯式轉譯一個依賴，可以在這個選項中列出來

    transpileDependencies: [],

  

    // 生產環境 sourceMap

    productionSourceMap: false,

    

    // 跨域設置 

    // 可取值參考： https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes

    crossorigin: undefined,

    

    // 構建後的文件是部署在 CDN 上的，啓用該選項可以提供額外的安全性, 默認false

    integrity: false,

   

    // 第三方插件配置

    pluginOptions: {}

  };