vue-cli scaffolding-configuration file under bulid-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

vue-cli scaffolding-configuration file under bulid

亚连

May 28, 2018 pm 04:56 PM

vue-cli Configuration file

这篇文章主要介绍了vue-cli脚手架-bulid下的配置文件,现在分享给大家，也给大家做个参考。

本文章适合初学者学习，如有错请提出。近期对vue比较感兴趣，所以准备用vue写一个blog。早期先对vue脚手架了解一下，对于新手官网建议先不用vue-cli，但我觉得如果没有任何的依据凭自己写一个项目（包括webpack的配置等）这无疑是浪费时间的而且都最后还是是而非的。所以我觉得完全可以用脚手架建一个webpack项目，然后我们可以具体对应它生成的文件学习（当然这只是我的学习方法，我认为这样比较好学，但不一定人人都是这样的）。

在学习的过程中发现网上许多的简介都已经过期（vue发展的过快了吧。。。。），所以我结合自己的项目和网上的资料备注一下，希望和其他的人一起讨论。这个适合的版本为：nodejs(6.10.2)、vue(2.5.2)、vue-router(3.0.1)和webpack(3.6.0)的。适合的环境为windows的，其他的系统我也不知道可不可以用。

一、vue-cli安装、webpack项目新建

1、默认电脑已经安装了node，不会的请百度然后先安装nodejs。

2、安装好nodejs之后，全局安装vue-cli：npm install -g vue-cli。

3、新建webpack项目：vue init webpack projectname(这是比较完整的，我们学习用这个比较好)、vue init webpack-simple projectname(简易版的)。

注意：projectname项目名不能用中文。

4、“vue init webpack-simple projectname”创建新项目的目录结构：

生成新项目时并没有安装依赖，需要进入新的项目安装依赖：cd projectname -> npm install。

新建项目时，会需要填一些东西，但如果你都不想填也无所谓，全部默认、全部yes都行：

(1)、Project name:——项目名称
(2)、Project description:——项目描述
(3)、Author:——作者
(4)、Vue build:——构建模式，一般默认选择第一种
(5)、Install vue-router?:——是否安装引入vue-router，这里选是，vue-router是路由组件,后面构建项目会用到
(6)、Use ESLint to lint your code?:——eslint的格式验证非常严格，多一个空格少一个空格都会报错。个人觉得如果是平时练习的话可以选yes因为这个可以规范自己js代码的书写规范。但在实际开发项目中不建议使用，会影响开发效率。
(7)、Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试，可以不用安装。

“vue init webpack projectname”创建新项目的目录结构：

二、build目录下配置文件之check-versions.js

这个文件并不是十分重要，只要稍微了解就行了。

/**
 * 验证版本
 */
&#39;use strict&#39;
//chalk是一个颜色插件。可以通过
const chalk = require(&#39;chalk&#39;)
//semver一个版本控制插件
const semver = require(&#39;semver&#39;)
const packageConfig = require(&#39;../package.json&#39;)
//shelljss是nodejs对与多进程的支持，是对于child_process封装
const shell = require(&#39;shelljs&#39;)
 
function exec (cmd) {
 return require(&#39;child_process&#39;).execSync(cmd).toString().trim()
}
 
const versionRequirements = [
 {//对应node的版本
  name: &#39;node&#39;,
  //当前环境版本，semver.clean把当前环境版本信息转化规定格式，也是&#39; =v1.2.3 &#39;->&#39;1.2.3&#39;
  currentVersion: semver.clean(process.version),
  //要求版本，对应package.json的engines所配置的信息
  versionRequirement: packageConfig.engines.node
 }
]
 
//npm环境中
if (shell.which(&#39;npm&#39;)) {
 versionRequirements.push({
  name: &#39;npm&#39;,
  //执行方法得到版本号
  currentVersion: exec(&#39;npm --version&#39;),
  versionRequirement: packageConfig.engines.npm
 })
}
 
module.exports = function () {
 const warnings = []
 
 for (let i = 0; i < versionRequirements.length; i++) {
  const mod = versionRequirements[i]
 
  //如果版本号不符合package.json文件中指定的版本号，就执行下面的代码
  if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
   warnings.push(mod.name + &#39;: &#39; +
    chalk.red(mod.currentVersion) + &#39; should be &#39; +
    chalk.green(mod.versionRequirement)
   )
  }
 }
 
 if (warnings.length) {
  console.log(&#39;&#39;)
  console.log(chalk.yellow(&#39;To use this template, you must update following to modules:&#39;))
  console.log()
 
  for (let i = 0; i < warnings.length; i++) {
   const warning = warnings[i]
   console.log(&#39; &#39; + warning)
  }
 
  console.log()
  process.exit(1)
 }
}

Copy after login

三、build目录下配置文件之utils.js

这个文件主要用于处理有关于css方面的，主要对后面vue-loader.conf.js文件有关系，对webpack配置loaders方面也有影响。

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

/**
 * webpack开发环境：主要用来处理css-loader和vue-style-loader
 */
 
&#39;use strict&#39;
const path = require(&#39;path&#39;)
const config = require(&#39;../config&#39;)
//引入extract-text-webpack-plugin插件，用来将css提取到单独的css文件中
const ExtractTextPlugin = require(&#39;extract-text-webpack-plugin&#39;)
const packageConfig = require(&#39;../package.json&#39;)
 
exports.assetsPath = function (_path) {
 //process.env.NODE_ENV在bulid.js中定义
 //如果为生产环境assetsSubDirectory为“static”，否则也为“static”
 //config.build.assetsSubDirectory与config.dev.assetsSubDirectory都在config/index中定义
 const assetsSubDirectory = process.env.NODE_ENV === &#39;production&#39;
  ? config.build.assetsSubDirectory
  : config.dev.assetsSubDirectory
 
 //path.join和path.posix.join区别前者返回完整路径，后者返回完整路径的相对路径
 //例：path.join是E:/shishans/blogsss/static，path.posix.join是static
 return path.posix.join(assetsSubDirectory, _path)
}
 
exports.cssLoaders = function (options) {
 options = options || {}
 
 //css-loader的基本配置
 const cssLoader = {
  loader: &#39;css-loader&#39;,
  options: {
   //option用于配置loder的
   //是否开启cssMap，默认是false
   //一般我们会压缩js或者css以节省宽带,但在开发压缩就很难调试
   //所以用sourceMap进行关联，给出对应的sourceMap文件
   sourceMap: options.sourceMap
  }
 }
 
 const postcssLoader = {
  loader: &#39;postcss-loader&#39;,
  options: {
   sourceMap: options.sourceMap
  }
 }
 
 // generate loader string to be used with extract text plugin
 function generateLoaders (loader, loaderOptions) {
  //将上面的基础配置放到一个数据中
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
  //如果该函数传递了单独的loder就加入到loaders数组中例如：sass或者less之类的
  if (loader) {
   loaders.push({
    //加载对应的loader
    loader: loader + &#39;-loader&#39;,
    //es6方法Object.assign：主要用于合并对象的，浅拷贝
    options: Object.assign({}, loaderOptions, {
     sourceMap: options.sourceMap
    })
   })
  }
 
  // Extract CSS when that option is specified
  // (which is the case during production build)
  // extract自定义属性，用ExtractTextPlugin.extract控制是否把文件单独提取
  // true：单独提取，false表示不提取
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: &#39;vue-style-loader&#39;
   })
  } else {
   //[].concat()方法用于连接数组
   return [&#39;vue-style-loader&#39;].concat(loaders)
  }
 }
 
 // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 return {
  css: generateLoaders(),//返回[cssLoader, vue-style-loader]
  postcss: generateLoaders(),//返回[cssLoader, vue-style-loader]
  less: generateLoaders(&#39;less&#39;),//返回[cssLoader, vue-style-loader, less]
  sass: generateLoaders(&#39;sass&#39;, { indentedSyntax: true }),
  scss: generateLoaders(&#39;sass&#39;),
  stylus: generateLoaders(&#39;stylus&#39;),
  styl: generateLoaders(&#39;stylus&#39;)
 }
}
 
// Generate loaders for standalone style files (outside of .vue)
// 这个方法主要处理import这种方式导入的文件类型的打包
exports.styleLoaders = function (options) {
 const output = []
 const loaders = exports.cssLoaders(options)
 
 for (const extension in loaders) {
  const loader = loaders[extension]
  output.push({
   test: new RegExp(&#39;\\.&#39; + extension + &#39;$&#39;),
   use: loader
  })
 }
 
 return output
}
 
//用于返回脚手架错误的函数
exports.createNotifierCallback = () => {
 //使用node-notifier来发送桌面消息,包括应用状态改变以及错误信息
 const notifier = require(&#39;node-notifier&#39;)
 
 return (severity, errors) => {
  if (severity !== &#39;error&#39;) return
 
  const error = errors[0]
  const filename = error.file && error.file.split(&#39;!&#39;).pop()
 
  notifier.notify({
   title: packageConfig.name,
   message: severity + &#39;: &#39; + error.name,
   subtitle: filename || &#39;&#39;,
   icon: path.join(__dirname, &#39;logo.png&#39;)
  })
 }
}

Copy after login

四、build目录下配置文件之webpack.base.conf.js

从这个文件开始，webpack配置文件正式开始，前面的相当于是这个文件参数般的存在。而实际上这个也不是正式会运行的配置文件。一个项目有2中情况：开发环境和生成环境。这2中环境一些方面的配置是不一样的，比如在生产环境我们会对js和css进行压缩以减少宽带。这个文件实际上是这2中环境通用的配置。下面的webpack.dev.conf.js文件（开发环境）、

webpack.prod.conf.js（生产环境），这2个文件才是实际环境运行使用的配置文件。

100

101

102

103

104

105

106

107

108

109

110

/**
 * webpack开发环境和生成环境通用的配置
 */
 
&#39;use strict&#39;
const path = require(&#39;path&#39;)
const utils = require(&#39;./utils&#39;)
const config = require(&#39;../config&#39;)
const vueLoaderConfig = require(&#39;./vue-loader.conf&#39;)
 
//获取对应文件路径的函数
//因为该文件是在项目的二级文件build下，所以要加上../这样才能找到像src这样的目录
function resolve (dir) {
 //join方法用于将多个字符串结合成一个路径字符串
 //path在node中会经常用到可以仔细了解一下path的各种方法
 //__dirname：获取当前文件所在目录的完整绝对路径
 return path.join(__dirname, &#39;..&#39;, dir)
}
 
//eslint用来检查我们写的js代码是否满足指定的规则
const createLintingRule = () => ({
 test: /\.(js|vue)$/,
 loader: &#39;eslint-loader&#39;,
 enforce: &#39;pre&#39;,
 include: [resolve(&#39;src&#39;), resolve(&#39;test&#39;)],
 options: {
  formatter: require(&#39;eslint-friendly-formatter&#39;),
  emitWarning: !config.dev.showEslintErrorsInOverlay
 }
})
 
module.exports = {
 context: path.resolve(__dirname, &#39;../&#39;),
 entry: {
  //入口文件是src下的main.js
  app: &#39;./src/main.js&#39;
 },
 output: {
  path: config.build.assetsRoot,
  filename: &#39;[name].js&#39;,
  publicPath: process.env.NODE_ENV === &#39;production&#39;
   ? config.build.assetsPublicPath
   : config.dev.assetsPublicPath
 },
 resolve: {
  //自动解析确定的扩展,在引入模块时不带扩展名
  //例如：import somejs from "@/some"
  extensions: [&#39;.js&#39;, &#39;.vue&#39;, &#39;.json&#39;],
  alias: {
   // 后面的$符号指精确匹配
   // 也就是说只能使用 import vuejs from "vue" 这样的方式导入vue.esm.js文件
   &#39;vue$&#39;: &#39;vue/dist/vue.esm.js&#39;,
   // resolve(&#39;src&#39;) 其实在这里就是项目根目录中的src目录
   // 例如引用src目录下的some.js方法:import somejs from "@/some.js"
   // 用@来代替../src
   &#39;@&#39;: resolve(&#39;src&#39;),
  }
 },
 module: {
  rules: [
   ...(config.dev.useEslint ? [createLintingRule()] : []),
   {
    test: /\.vue$/,
    loader: &#39;vue-loader&#39;,
    options: vueLoaderConfig
   },
   {
    test: /\.js$/,
    loader: &#39;babel-loader&#39;,
    include: [resolve(&#39;src&#39;), resolve(&#39;test&#39;), resolve(&#39;node_modules/webpack-dev-server/client&#39;)]
   },
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: &#39;url-loader&#39;,
    options: {
     limit: 10000,
     name: utils.assetsPath(&#39;img/[name].[hash:7].[ext]&#39;)
    }
   },
   {
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    loader: &#39;url-loader&#39;,
    options: {
     limit: 10000,
     name: utils.assetsPath(&#39;media/[name].[hash:7].[ext]&#39;)
    }
   },
   {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: &#39;url-loader&#39;,
    options: {
     limit: 10000,
     name: utils.assetsPath(&#39;fonts/[name].[hash:7].[ext]&#39;)
    }
   }
  ]
 },
 node: {
  // prevent webpack from injecting useless setImmediate polyfill because Vue
  // source contains it (although only uses it if it&#39;s native).
  setImmediate: false,
  // prevent webpack from injecting mocks to Node native modules
  // that does not make sense for the client
  dgram: &#39;empty&#39;,
  fs: &#39;empty&#39;,
  net: &#39;empty&#39;,
  tls: &#39;empty&#39;,
  child_process: &#39;empty&#39;
 }
}

Copy after login

五、build目录下配置文件之webpack.dev.conf.js

webpack.prod.conf.js也差不多。这2者之间的差别以后再讨论。

100

101

102

103

104

105

106

107

108

/**
 * 此文件用于开发环境下的webpack配置
 * 就本项目执行npm run dev 和 npm run start都会用到这个文件的配置
 * 具体可以参考JavaScript中"scripts"的配置
 */
&#39;use strict&#39;
const utils = require(&#39;./utils&#39;)
const webpack = require(&#39;webpack&#39;)
const config = require(&#39;../config&#39;)
const merge = require(&#39;webpack-merge&#39;)
const path = require(&#39;path&#39;)
const baseWebpackConfig = require(&#39;./webpack.base.conf&#39;)
const CopyWebpackPlugin = require(&#39;copy-webpack-plugin&#39;)
//生成html文件
const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;)
//friendly-errors-webpack-plugin:把webpack的错误和日志搜集起来展现给用户
const FriendlyErrorsPlugin = require(&#39;friendly-errors-webpack-plugin&#39;)
const portfinder = require(&#39;portfinder&#39;)
 
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
 
const devWebpackConfig = merge(baseWebpackConfig, {
 module: {
  rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
 },
 // cheap-module-eval-source-map is faster for development
 // devtool是开发工具选项，用来指定如何生成sourcemap文件，cheap-module-eval-source-map此款soucemap文件性价比最高
 // 生产环境：#source-map
 // 开发环境：#cheap-module-eval-source-map 编译消耗小
 devtool: config.dev.devtool,
 
 // these devServer options should be customized in /config/index.js
 devServer: {
  clientLogLevel: &#39;warning&#39;,
  historyApiFallback: {
   rewrites: [
    { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, &#39;index.html&#39;) },
   ],
  },
  hot: true,
  contentBase: false, // since we use CopyWebpackPlugin.
  compress: true,
  host: HOST || config.dev.host,
  port: PORT || config.dev.port,
  open: config.dev.autoOpenBrowser,
  overlay: config.dev.errorOverlay
   ? { warnings: false, errors: true }
   : false,
  publicPath: config.dev.assetsPublicPath,
  proxy: config.dev.proxyTable,
  quiet: true, // necessary for FriendlyErrorsPlugin
  watchOptions: {
   poll: config.dev.poll,
  }
 },
 plugins: [
  // DefinePlugin内置webpack插件，专门用来定义全局变量的
  // 下面定义一个全局变量 process.env 并且值是如下
  new webpack.DefinePlugin({
   &#39;process.env&#39;: require(&#39;../config/dev.env&#39;)
  }),
  // 这个插件帮助你实现无刷新加载，关于内部实现原理
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
  new webpack.NoEmitOnErrorsPlugin(),
  // https://github.com/ampedandwired/html-webpack-plugin
  new HtmlWebpackPlugin({
   filename: &#39;index.html&#39;,
   template: &#39;index.html&#39;,
   inject: true
  }),
  // copy custom static assets
  new CopyWebpackPlugin([
   {
    from: path.resolve(__dirname, &#39;../static&#39;),
    to: config.dev.assetsSubDirectory,
    ignore: [&#39;.*&#39;]
   }
  ])
 ]
})
 
module.exports = new Promise((resolve, reject) => {
 portfinder.basePort = process.env.PORT || config.dev.port
 portfinder.getPort((err, port) => {
  if (err) {
   reject(err)
  } else {
   // publish the new Port, necessary for e2e tests
   process.env.PORT = port
   // add port to devServer config
   devWebpackConfig.devServer.port = port
 
   // Add FriendlyErrorsPlugin
   devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
    compilationSuccessInfo: {
     messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
    },
    onErrors: config.dev.notifyOnErrors
    ? utils.createNotifierCallback()
    : undefined
   }))
 
   resolve(devWebpackConfig)
  }
 })
})

Copy after login

六、config目录下之index.js

这个文件配置了一些全局属性，分别dev和build用于区别开发环境和生产环境不同的地方。

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Detailed explanation of AJAX mechanism and cross-domain communication

Performance optimization method of Ajax non-refresh paging

Detailed explanation of ajax jtemplate to implement dynamic paging

The above is the detailed content of vue-cli scaffolding-configuration file under bulid. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7330

Java Tutorial

1627

CakePHP Tutorial

1350

Laravel Tutorial

1262

PHP Tutorial

1209

Related knowledge

Super complete! Common ways to write configuration files in Python Apr 11, 2023 pm 10:22 PM

Why should we write the fixed file of the configuration file? We can directly write it as a .py file, such as settings.py or config.py. The advantage of this is that we can directly import parts of it through import in the same project; but if we need to use it in other When sharing configuration files on non-Python platforms, writing a single .py is not a good choice. At this time we should choose a common configuration file type to store these fixed parts. Currently, the commonly used and popular configuration file format types mainly include ini, json, toml, yaml, xml, etc. We can access these types of configuration files through standard libraries or third-party libraries.

How to enable or disable eSIM on Windows 11 Sep 20, 2023 pm 05:17 PM

If you bought your laptop from a mobile operator, you most likely had the option to activate an eSIM and use your cellular network to connect your computer to the Internet. With eSIM, you don't need to insert another physical SIM card into your laptop because it's already built-in. It is very useful when your device cannot connect to the network. How to check if my Windows 11 device is eSIM compatible? Click the Start button and go to Network & Internet > Cellular > Settings. If you don't see the "Cellular" option, your device doesn't have eSIM capabilities and you should check another option, such as using your mobile device to connect your laptop to a hotspot. In order to activate and

How to change network type to private or public in Windows 11 Aug 24, 2023 pm 12:37 PM

Setting up a wireless network is common, but choosing or changing the network type can be confusing, especially if you don't know the consequences. If you're looking for advice on how to change the network type from public to private or vice versa in Windows 11, read on for some helpful information. What are the different network profiles in Windows 11? Windows 11 comes with a number of network profiles, which are essentially sets of settings that can be used to configure various network connections. This is useful if you have multiple connections at home or office so you don't have to set it all up every time you connect to a new network. Private and public network profiles are two common types in Windows 11, but generally

Install Helm on Ubuntu Mar 20, 2024 pm 06:41 PM

Helm is an important component of Kubernetes that simplifies the deployment of Kubernetes applications by bundling configuration files into a package called HelmChart. This approach makes updating a single configuration file more convenient than modifying multiple files. With Helm, users can easily deploy Kubernetes applications, simplifying the entire deployment process and improving efficiency. In this guide, I'll cover different ways to implement Helm on Ubuntu. Please note: The commands in the following guide apply to Ubuntu 22.04 as well as all Ubuntu versions and Debian-based distributions. These commands are tested and should work correctly on your system. in U

Where is the win10 user profile? How to set the user profile in Win10 Jun 25, 2024 pm 05:55 PM

Recently, many Win10 system users want to change the user profile, but they don’t know how to do it. This article will show you how to set the user profile in Win10 system! How to set up user profile in Win10 1. First, press the "Win+I" keys to open the settings interface, and click to enter the "System" settings. 2. Then, in the opened interface, click "About" on the left, then find and click "Advanced System Settings". 3. Then, in the pop-up window, switch to the "" option bar and click "User Configuration" below.

Super complete! Common ways to write configuration files in Python Apr 13, 2023 am 08:31 AM

Why write configuration files? During the development process, we often use some fixed parameters or constants. For these more fixed and commonly used parts, they are often written into a fixed file to avoid repetition in different module codes and keep the core code clean. We can directly write this fixed file into a .py file, such as settings.py or config.py. The advantage of this is that we can directly import parts of it through import in the same project; but if we need to do it on other non-Python platforms When configuring file sharing, writing a single .py is not a good choice. At this time we should choose a common configuration file type

Effective method to solve the problem of garbled characters in the eclipse editor Jan 04, 2024 pm 06:56 PM

An effective method to solve the garbled problem of eclipse requires specific code examples. In recent years, with the rapid development of software development, eclipse, as one of the most popular integrated development environments, has provided convenience and efficiency to many developers. However, you may encounter garbled code problems when using eclipse, which brings trouble to project development and code reading. This article will introduce some effective methods to solve the problem of garbled characters in Eclipse and provide specific code examples. Modify eclipse file encoding settings: in eclip

What is the correct way to read and write configuration in a Python project? May 09, 2023 pm 07:16 PM

1. This method of writing the configuration in a Python file is very simple, but it has serious security issues. We all know that the configuration should not be written in the code. If someone uploads our source code to github, then the database The configuration is equivalent to being disclosed to the whole world. Of course, this simple method can also be used when the configuration file does not contain sensitive information. 2. Use external configuration files to separate configuration files and code. Usually, json, yaml or ini file formats are used to store configurations. Combining environment variables and python libraries to read external files. First of all, development usually does not come into contact with the generation environment, so the configuration file of the generation environment is written by operation and maintenance. After operation and maintenance writes the configuration required by the application, it is placed in

See all articles