Vue3.0 vue.config.js基本配置

Vue-cli3 vue.config.js基本配置

vue-cli2创建项目后是自身具有config文件夹，在vue-cli3中创建项目后不会生成相应的配置文件，这里的vue.config.js文件需要自己创建，一般是在项目的根目录下。

下面是根据vue-cli官方文档进行的基本配置，可以直接复制使用。
注意： loaderOptions中的sass是我创建项目时选择的，data对应的路径需要自己创建！！！

// vue.config.js
const path = require("path");
module.exports = {
  // 基本路径
  publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
  // 构建时的输出目录
  outputDir: "dist",
  // 放置静态资源的目录
  assetsDir: "static",
  // html输出的主路径
  indexPath: "index.html",
  // 文件名哈希
  filenameHashing: true,

  // 多页面配置，默认undefined
  pages: {
    index: {
      // 入口文件
      entry: "src/main.js",
      // 模板文件
      template: "public/index.html",
      // 在dist中输出文件名称
      filename: "index.html",
      // 当使用页面title时
      // template中的title标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: "Index Page",
      // 在这个页面中包含的块，默认情况下会包含提取出来的通用的chunk和vender chunk
      chunk: ["chunk-vendors", "chunk-common", "index"],
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    // subpage: 'src/subpage/main.js'
  },

  // 是否在保存时使用'eslint-loader'进行检查
  // true || 'warning' 输出编译警告到命令行，不影响编译
  // 'default' 强制输出为编译错误且导致编译失败
  // 'error' 将编译警告输出为编译错误且导致编译失败
  lintOnSave: true,

  // 是否使用包含运行时编译器的vue构建版本(使用会让应用多10kb)
  runtimeCompiler: false,

  // 想要Babel显示编译的依赖，默认为[]
  // transpileDependencies: [],
  // 生产环境的source map，默认为true
  // productionSourceMap: true,
  // 设置link和script标签跨域，默认为undefined
  // crossorigin: "",
  // 子资源的完整性保证，即在link和script上生成integrity属性，默认为false
  // integrity: false
  //  调整内部的 webpack 配置
  //   chainWebpack: (config) => {},
  configureWebpack: (config) => {
    config.resolve = {
      extensions: [".js", ".json", ".vue"],
      alias: {
        "@": path.resolve(__dirname, "./src"),
      },
    };
  }, //(Object | Function)

  // CSS相关选项
  css: {
    // 为所有css及其预处理文件开启CSS Modules
    // v4放弃，使用css.requireModuleExtension，两者使用相反
    // modules: false,
    requireModuleExtension: true,

    // 是否将组件内的CSS提取到一个单独的css文件中(而不是注入到js中的inline代码)
    // 生产环境默认为true，开发环境默认为false
    extract: true,
    // 是否为css开启source map
    sourceMap: false,
    // 向CSS相关的loader传递选项
    // 支持css-loader、postcss-loader、sass-loader、less-loader和stylus-loader
    loaderOptions: {
      // 这里的选项会传递给css-loader
      // css: {},
      // 这里的选项会传递给postcss-loader
      // postcss: {},
      sass: {
        data: `@import "./src/styles/main.scss";`,
      },
    },
  },

  // 配置webpack-dev-server行为
  devServer: {
    open: process.platform === "darwin",
    host: "0.0.0.0",
    port: "9090",
    https: false,
    hotOnly: true,
    // 代理跨域,值为String或者Object
    // proxy: "",
    // proxy: {
    //   "/api": {
    //     target: "<url>",
    //     ws: true,
    //     changeOrigin: true,
    //   },
    // },

    // cpu多于一个内核时自动启用多线程加载，用于生产构建
    // parallel: require('os').cpus().length > 1,
    // 不进行任何scheme验证的选项
    // pluginOptions: {
    //     foo: {
    //         //插件可以作为`options.pluginOptions.foo`来访问这些选项
    //     }
    // },
  },
};