vue初始化工程缺vue-config.js(3.x部分配置不适用,比如babel方式)

const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  //   entry: "./main.js",
  // 基本路径
  publicPath: "/", //vue2换成baseUrl
  // 输出文件目录
  outputDir: "dist",
  // 用于嵌套生成的静态资产(js,css,img,fonts)目录
  // assetsDir: '',
  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
  indexPath: 'index.html', // Default: 'index.html'
  filenameHashing: true,
  // 构建多页时使用
   pages: undefined,
  // eslint-loader是否在保存的时候检查
   lintOnSave: true,
  // 是否使用包含运行时编译器的Vue核心的构建
   runtimeCompiler: false,
   // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来
   transpileDependencies: [],
  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  // 自定义webpack配置 configureWebpack 与 chainWebpack 本质上没有什么区别,只是前者配置 简单方便,后者可以 更为细粒度地控制配置
  // Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象,使其可以定义具名的 loader 规则和具名插件,并有机会在后期进入这些规则并对它们的选项进行修改。
  // 它允许我们更细粒度的控制其内部配置
  chainWebpack: config => {
    // config.resolve.alias
    //     .set('@', resolve('src'))
    //     .set('@common', resolve('@/components/common'))
  },
  configureWebpack: {
    resolve: {
      alias: {
        // "@": resolve('src'),
        // '@common': resolve('@/components/common'),
        // '@bus': resolve('@/components/business'),
        // '@basic': resolve('@/components/basic')
      },
    },
    output: {
      //   // 把子应用打包成 umd 库格式
      //   library: `${name}-[name]`,
      //   libraryTarget: 'umd',
      //   jsonpFunction: `webpackJsonp_${name}`,
    },
    module: {
      rules: [
        // {
        //   test: /\.jsx?$/,
        //   exclude: /node_modules/,
        //   use: {
        //     loader: "babel-loader",
        //     options: {
        //       presets: ["@babel/preset-env"],
        //       plugins: ["@babel/plugin-transform-react-jsx"],
        //     },
        //   },
        // },
        {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
        },
        // {
        //   test: /\.(le|c)ss$/,
        //   use: ["style-loader", "css-loader", "less-loader"],
        // },
      ],
    },
  },
  // vue-loader 配置项
  // https://vue-loader.vuejs.org/en/options.html
  // vueLoader: {},
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // css相关配置
  css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        modules: false,
      //向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
      // loaderOptions: {
      // scss: {
      //   additionalData:
      //     '@import "~@/assets/stylesheet/variables";@import "~@/assets/stylesheet/mixins";'
      // }
      // postcss: {
      //   plugins: [
      //     require('postcss-plugin-px2rem')({
      //       rootValue: 100,
      //       exclude: /(node_modules|src\/components|sceneDefine2|sceneEleManage|sceneList|stylesheet)/,
      //       mediaQuery: false,
      //       selectorBlackList: ['no-rem']
      //     })
      //   ]
      // }
    // }
    },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  // parallel: require("os").cpus().length > 1,
  // 是否启用dll
  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  // dll: false,
  // PWA 插件相关配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // webpack-dev-server 相关配置
  devServer: {
    // open: process.platform === 'darwin',
    //将服务启动后默认打开浏览器
    open: true,
    host: "localhost", // 使用花生壳之类的 需改为 0.0.0.0
    port: 8080,
    https: false,
    hotOnly: false,
    disableHostCheck: true, // 使用花生壳之类的 需设为false
   // 该配置项可以在HTTP响应中注入一些HTTP响应头
    headers: {
      'X-foo': '112233'
    },
    proxy: {
      // 设置代理
      "/api": {
        target: "http://www.test.com",
        changeOrigin: true,
            //ws: true, // proxy websockets
            //pathRewrite方法重写url
            pathRewrite: {
                '^/api': '/' 
                //pathRewrite: {'^/api': '/'} 
                //pathRewrite: {'^/api': '/api'}
           }
      },
    },
    before: (app) => {},
  },
  // 第三方插件配置
  pluginOptions: {
    // ...
  },
};

webpack-dev-server 相关配置,参考链接:https://www.cnblogs.com/wb336035888/p/10448873.html
https://blog.csdn.net/qq_38290251/article/details/112170092

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容