vue.config.js 的配置

示例一

const path = require('path')

const resolve = dir => {
  return path.join(__dirname, dir)
}

// 项目部署基础
// 默认情况下，我们假设你的应用将被部署在域的根目录下,
// 例如：https://www.my-app.com/
// 默认：'/'
// 如果您的应用程序部署在子路径中，则需要在这指定子路径
// 例如：https://www.foobar.com/my-app/
// 需要将它改为'/my-app/'
// iview-admin线上演示打包路径： https://file.iviewui.com/admin-dist/
const BASE_URL = process.env.NODE_ENV === 'production'
  ? '/'
  : '/'

module.exports = {
  // Project deployment base
  // By default we assume your app will be deployed at the root of a domain,
  // e.g. https://www.my-app.com/
  // If your app is deployed at a sub-path, you will need to specify that
  // sub-path here. For example, if your app is deployed at
  // https://www.foobar.com/my-app/
  // then change this to '/my-app/'
  baseUrl: BASE_URL,
  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  // 如果你不需要使用eslint，把lintOnSave设为false即可
  lintOnSave: false,
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('_c', resolve('src/components'))
  },
  // 设为false打包时不生成.map文件
  productionSourceMap: false,
  // 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串
  // devServer: {
  //   proxy: 'localhost:3000'
  // }
  devServer: {
    port: '8080',  // 项目启动端口
    open: true,   // 项目启动时，自动打开浏览器
    proxy: {
      // 基础api
      '/ajax/': {
        target: '',
        changeOrigin: true,
      },
      // AI在线标注api
      '/labelapi/': {
        target: '',
        changeOrigin: true,
        pathRewrite: {
          '^/labelapi': '/ajax'
        }
      },
      '/pic/': {
        target: '',
        changeOrigin: true,
      },
      '/pic1/': {
        target: '',
        changeOrigin: true,
      },
      '/rar/': {
        target: '',
        changeOrigin: true,
      },
      '/dy/': {
        target: '',
        changeOrigin: true,
      }
    }
  }
}

示例2

const { defineConfig } = require("@vue/cli-service");
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

const PrerenderSPAPlugin = require("@dreysolano/prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, //这是一种方法，确认有效
  chainWebpack: (config) => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("images", resolve("src/assets/images"))
      .set("components", resolve("src/components"));
  },

  configureWebpack: (config) => {
    if (process.env.NODE_ENV !== "production") return;
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 下面这句话非常重要！！！
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, "dist"),
          // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
          routes: [
            "/",
            "/home",
            "/service",
            "/platform",
            "/solution",
            "/resource",
            "/contact",
          ],
          // 这个很重要，如果没有配置这段，也不会进行预编译
          renderer: new Renderer({
            inject: {
              foo: "bar",
            },
            headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            renderAfterDocumentEvent: "render-event",
          }),
        }),
      ],
    };
  },
  devServer: {
    port: '8080',  // 项目启动端口
    open: true,   // 项目启动时，自动打开浏览器
    proxy: {
      // 基础api
      '/api/': {
        target: '',
        changeOrigin: true,
      },
    }
  }
});