Vue项目打包后出现的路径问题以及解决方案

<img src="images/logo.png" alt="Logo"> <!-- 打包后路径可能不正确 -->

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
});

const API_URL = process.env.VUE_APP_API_URL; // 打包后可能为空或不正确

// vue.config.js
module.exports = {
  publicPath: '/' // 打包后可能需要根据部署路径调整
};

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        options.limit = 1024; // 小于 1KB 的图片将被转为 base64
        return options;
      });
  }
};

<img src="@/assets/images/logo.png" alt="Logo">

const router = new VueRouter({
  base: process.env.BASE_URL, // 使用环境变量
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
});

// .env.production
VUE_APP_API_URL=https://api.example.com

// src/main.js
const API_URL = process.env.VUE_APP_API_URL;

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/'
};

vue add static

// vue.config.js
module.exports = {
  pluginOptions: {
    static: {
      publicPath: '/static/',
      staticDir: 'public/static'
    }
  }
};

npm install --save-dev webpack-bundle-analyzer

// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  }
};