vue 3.0 Common configuration methods

// 
 
const path = require("path");
const resolve = dir => (__dirname, dir);
// const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const webpack = require("webpack");
 
 = {
  // The basic path to project deployment, by default, your application will be deployed at the root of the domain name, for example, /  // If your application is deployed under a subpath, then you need to specify the subpath here, for example,  // If you deploy in /my-app/; then change this value to "/my-app/"  publicPath: "/",
 
  // Where to output the built files to the directory of the production environment build file generated when vue-cli-service build is run.  // Note that the target directory will be cleared before building (passing --no-clean during build can turn off this behavior).  outputDir: "dist",
 
  // Place the generated static resources (js, css, img, fonts) directory (relative to outputDir).  assetsDir: "static",
 
  // Specifies the generated output path (relative to outputDir).  It can also be an absolute path.  indexPath: '',
 
  // By default, include hash in the generated static resource file name to control cache  filenameHashing: true,
 
  // Whether to lint the code every time you save it through eslint-loader in the development environment.  This value will take effect after @vue/cli-plugin-eslint is installed.  // When set to true, eslint-loader outputs lint errors as a compilation warning.  By default,  // The warning will only be output to the command line and will not fail to compile.  // If you want the lint error to be displayed directly in the browser during development, you can use lintOnSave: 'error'.  // This forces eslint-loader to output lint errors as compilation errors, which also means that lint errors will cause compilation failures.  lintOnSave: true,
 
  // Whether to use a Vue build that contains a runtime compiler.  When set to true, you can use it in the Vue component  // template option, but this will add about 10kb to your application.  runtimeCompiler: false,
 
  // By default, babel-loader ignores all files in node_modules.  If you want to use Babel explicit  // Translate a dependency, which can be listed in this option.  transpileDependencies: [],
 
  // If you don't need the source map for the production environment, you can set it to false to speed up production environment construction.  productionSourceMap: true,
 
  // Pass options to CSS-related loaders  css: {
    // When true, the css file name can be omitted. The default module is false.    modules: false,
    // Whether to extract the CSS from the component into a separate CSS file, when built as a library, you can also set it to false to avoid the user importing the CSS by itself.    // It is true in the production environment, and false in the development environment    extract: false,
    // Whether to enable source map for CSS.  Setting to true may affect the performance of the build    sourceMap: false,
    /* Pass custom options for preprocessor loader*/
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/_variable.scss";`,// Preset global css variable      },
      css: {
        // The options here will be passed to css-loader      },
      postcss: {
        // The options here will be passed to postcss-loader      }
    },
  },
 
  // is a function that will receive a ChainableConfig instance based on webpack-chain.  Allow internal  // The webpack configuration is modified in a more fine-grained manner.  chainWebpack: config => {
    // Add an alias    
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("utils", resolve("src/utils"))
      .set("api", resolve("src/api"));
  },
 
  // Whether to use thread-loader for Babel or TypeScript.  This option is more than the CPU of the system  //Open automatically when a kernel is used, only for production builds.  parallel: require("os").cpus().length > 1,
 
  // Pass options to the PWA plugin.  // /vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
 
  // All webpack-dev-server options are supported.  // Note: Some values ​​like host, port, and https may be overwritten by command line parameters.  // Some values ​​like publicPath and historyApiFallback should not be modified because they need to be synchronized with the development server's publicPath to ensure normal work.  // Local service configuration  devServer: {
    host: "0.0.0.0",
    port: 8080, // Port number    https: false, // https:{type:Boolean}
    open: true //Configure the automatic browser to start open: 'Google Chrome' - default to start Google 
    // Configure cross-domain proxy    proxy: {
    // illustrate:    // The browser has a same-origin policy that does not support cross-domain, but the server does not. Through proxy configuration, the request for the interface server will be proxyed to the local server.    // It is forwarded from the local server to the interface server (target target server), so after setting up the proxy,    // The interface request path will become the proxy server address, that is, the local address localhost or 127.0.0.1 
    // Configuration:    // '/api' can be any value, indicating a request starting with /api. In the actual project, requests starting with /api will be forwarded by the local server.    '/api': {
      // target refers to the backend interface server address (target path) that you want to be proxyed (the real requested server address)      target: 'http://192.168.6.267:8080',
      // pathRewrite is used to rewrite the request path when sending a request      // If you do not want /api to appear in the actual request path, you can override the path and remove /api from the request path as shown below      pathRewrite: {
        // For example:        // If your interface service address is: http://192.168.6.267:8080, your interface path is /base/company/list        // Then in order to use the /api proxy, you can add /api in front of the interface path, such as: /api/base/company/list        // Then your request will be proxyed to the real interface address by the local service, solving the cross-domain problem        // But your request path will become: http://192.168.6.267:8080/api/base/company/list, and the path is redundant/api        // Then you can remove /api by rewriting (as follows)        // Or you can choose to change /api to /base, so there is no need to rewrite the path. The specific use is determined based on the business.        '^/api': ''
      }
    }
  },
  },
 
  // Third-party plug-in options  // This is an object that does not perform any schema validation, so it can be used to pass any third-party plugin options.  pluginOptions: {}
};

const { defineConfig } = require('@vue/cli-service')
 = defineConfig({
    //Basic path    publicPath: .NODE_ENV === 'production' ? './' : '/',
    //Output directory	outputDir: 'dist',
	//Specify the generated file	indexPath: '',
	//vue compatible ie	transpileDependencies: true,
	// Whether to enable eslint verification	lintOnSave: false,
	//Development environment configuration	devServer: {
	    //Allow others to access their IP address		host: '0.0.0.0',
		//Proxy configuration		proxy: {
            '/api': {
                target: 'https://192.:8080/',//Domain name of the interface                ws: true,//Whether to proxy websockets                secure: false,//Is it a https interface?                changeOrigin: true,//Whether it crosses the domain                pathRewrite: {//Rewrite the address and convert the prefix/api to ""                	'^/api': ""
                }
            }
        }
	}
})