Detailed explanation of config/index.js: configuration in vue

This article mainly introduces the detailed explanation of config/index.js: configuration in vue. It has certain reference value. Now I share it with you. Friends in need can refer to it

When we need When deploying separately from the background, you must configure config/index.js:

In the directory automatically built with vue-cli (configuration of environment variables and basic variables)

var path = require('path')
 
module.exports = {
  build: {
    index: path.resolve(__dirname, 'dist/index.html'),
    assetsRoot: path.resolve(__dirname, 'dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true
  },
  dev: {
    port: 8080,
    proxyTable: {}
  }
}

In 'build ' section, we have the following options:

build.index

must be an absolute path on the local file system.

index.html (with the inserted resource path) will be generated.

If you are using this template in a background framework, you can edit the index.html path to specify the file generated by your background program. For example, a Rails program can be app/views/layouts/application.html.erb, or a Laravel program can be resources/views/index.blade.php.

build.assetsRoot

must be an absolute path on the local file system.

should point to the root directory that contains all the static assets of your application. public/ corresponds to Rails/Laravel.

build.assetsSubDirectory

The resource files compiled and processed by webpack will be in this build.assetsRoot directory, so they cannot be mixed Other files that may be in build.assetsRoot. For example, if the build.assetsRoot parameter is /path/to/dist and the build.assetsSubDirectory parameter is static, then all webpack resources Will be compiled to the path/to/dist/static directory.

This directory will be cleared before each compilation, so this can only contain compiled resource files. The files in the

static/ directory will be directly copied to this directory during the build process. This means that if you change this rule, all the absolute addresses of files in static/ that you depend on will need to change.

build.assetsPublicPath [Root directory of resources]

This is the url path run through the http server. In most cases, this is the root directory (/). If your backend framework requires static resource URL prefixes, you only need to change this parameter. Internally, this is handled by webpack as output.publicPath.

If there are requirements in the background, you should generally add ./ or add it according to the specific directory, otherwise the static resources will not be referenced

build.productionSourceMap

in Whether to enable source map when building the production environment version.

dev.port

Specific port that the development server listens on

dev.proxyTable

Define development The server's proxy rules.

The config/index.js configured in the project has configurations for both dev and production environments. The following is an understanding of the webpack configuration in the production environment.

var path = require('path')
module.exports = {
  build: { // production 环境
    env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境
    index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件
    assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径
    assetsSubDirectory: 'static', // 编译输出的二级目录
    assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名
    productionSourceMap: true, // 是否开启 cssSourceMap
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false, // 是否开启 gzip
    productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 压缩的文件扩展名
  },
  dev: { // dev 环境
    env: require('./dev.env'), // 使用 config/dev.env.js 中定义的编译环境
    port: 8080, // 运行测试页面的端口
    assetsSubDirectory: 'static', // 编译输出的二级目录
    assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名
    proxyTable: {}, // 需要 proxyTable 代理的接口（可跨域）
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false // 是否开启 cssSourceMap
  }
}

The following is the build in vue. /webpack.base.conf.js

//引入依赖模块
var path = require('path')
var config = require('../config') // 获取配置
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
 
var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)/* 是否在 dev 环境下开启 cssSourceMap ，在 config/index.js 中可配置 */
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)/* 是否在 production 环境下开启 cssSourceMap ，在 config/index.js 中可配置 */
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd /* 最终是否使用 cssSourceMap */
 
module.exports = {
  entry: {   // 配置webpack编译入口
    app: './src/main.js' 
  },
  output: {    // 配置webpack输出路径和命名规则
    path: config.build.assetsRoot, // webpack输出的目标文件夹路径（例如：/dist）
    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,  // webpack编译输出的发布路径(判断是正式环境或者开发环境等)
    filename: '[name].js'   // webpack输出bundle文件命名格式，基于文件的md5生成Hash名称的script来防止缓存
  },
  resolve: {
    extensions: ['', '.js', '.vue', '.scss'],  //自动解析确定的拓展名,使导入模块时不带拓展名
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {  // 创建import或require的别名，一些常用的，路径长的都可以用别名
      'vue$': 'vue/dist/vue',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components'),
      'scss_vars': path.resolve(__dirname, '../src/styles/vars.scss')
    }
  },
  resolveLoader: {
    fallback: [path.join(__dirname, '../node_modules')]
  },
  module: {
    loaders: [
        {
            test: /\.vue$/, // vue文件后缀
            loader: 'vue'   //使用vue-loader处理
        },
        {
            test: /\.js$/,
            loader: 'babel',
            include: projectRoot,
            exclude: /node_modules/
        },
        {
            test: /\.json$/,
            loader: 'json'
        },
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url',
            query: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
        },
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url',
            query: {
              limit: 10000,
              name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
        }
    ]
  },
  vue: {    // .vue 文件配置 loader 及工具 (autoprefixer)
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), //// 调用cssLoaders方法返回各类型的样式对象(css: loader)
    postcss: [
      require('autoprefixer')({
        browsers: ['last 2 versions']
      })
    ]
  }
}

webpack.prod.conf.js Configuration file in production environment

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')// 一个可以合并数组和对象的插件
var baseWebpackConfig = require('./webpack.base.conf')
// 用于从webpack生成的bundle中提取文本到特定文件中的插件
// 可以抽取出css，js文件将其与webpack输出的bundle分离
var ExtractTextPlugin = require('extract-text-webpack-plugin')  //如果我们想用webpack打包成一个文件，css js分离开，需要这个插件
var HtmlWebpackPlugin = require('html-webpack-plugin')// 一个用于生成HTML文件并自动注入依赖文件（link/script）的webpack插件
var env = config.build.env
// 合并基础的webpack配置
var webpackConfig = merge(baseWebpackConfig, {
    // 配置样式文件的处理规则，使用styleLoaders
  module: {
    loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
  },
  devtool: config.build.productionSourceMap ? '#source-map' : false, // 开启source-map，生产环境下推荐使用cheap-source-map或source-map，后者得到的.map文件体积比较大，但是能够完全还原以前的js代码
  output: {
    path: config.build.assetsRoot,// 编译输出目录
    filename: utils.assetsPath('js/[name].[chunkhash].js'),  // 编译输出文件名格式
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')  // 没有指定输出名的文件输出的文件名格式
  },
  vue: { // vue里的css也要单独提取出来
    loaders: utils.cssLoaders({ // css加载器，调用了utils文件中的cssLoaders方法,用来返回针对各类型的样式文件的处理方式,
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  // 重新配置插件项
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    // 位于开发环境下
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new webpack.optimize.UglifyJsPlugin({// 丑化压缩代码
      compress: {
        warnings: false
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    // extract css into its own file
    new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),  // 抽离css文件
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
     // filename 生成网页的HTML名字，可以使用/来控制文件文件的目录结构，最
      // 终生成的路径是基于webpac配置的output.path的
    new HtmlWebpackPlugin({
        // 生成html文件的名字，路径和生产环境下的不同，要与修改后的publickPath相结合，否则开启服务器后页面空白
      filename: config.build.index,
      // 源文件，路径相对于本文件所在的位置
      template: 'index.html',
      inject: true,// 要把

build/build.js page in vue

// https://github.com/shelljs/shelljs
require('./check-versions')() // 检查 Node 和 npm 版本
require('shelljs/global')  // 使用了 shelljs 插件，可以让我们在 node 环境的 js 中使用 shell
env.NODE_ENV = 'production'
var path = require('path') 
var config = require('../config') // 加载 config.js
var ora = require('ora') // 一个很好看的 loading 插件
var webpack = require('webpack')  // 加载 webpack
var webpackConfig = require('./webpack.prod.conf')  // 加载 webpack.prod.conf
console.log( //  输出提示信息 ～ 提示用户请在 http 服务下查看本页面，否则为空白页
  '  Tip:\n' +
  '  Built files are meant to be served over an HTTP server.\n' +
  '  Opening index.html over file:// won\'t work.\n'
)
var spinner = ora('building for production...')  // 使用 ora 打印出 loading + log
spinner.start()  // 开始 loading 动画
/* 拼接编译输出文件路径 */
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
rm('-rf', assetsPath) /* 删除这个文件夹 （递归删除） */
mkdir('-p', assetsPath) /* 创建此文件夹 */ 
cp('-R', 'static/*', assetsPath) /* 复制 static 文件夹到我们的编译输出目录 */
webpack(webpackConfig, function (err, stats) {  //  开始 webpack 的编译
    // 编译成功的回调函数
  spinner.stop()
  if (err) throw err
  process.stdout.write(stats.toString({
    colors: true,
    modules: false,
    children: false,
    chunks: false,
    chunkModules: false
  }) + '\n')
})

Project entry, as can be seen from the package.json file

"scripts": {    "dev": "node build/dev-server.js",    "build": "node build/build.js",    "watch": "node build/build-watch.js"
  },

When we execute npm run dev / npm run build / npm run watch, node build/dev-server.js or node build/build is run. js or node build/build-watch.js

node build/build-watch.js is the configuration I configured to load the production environment. Add watch: true to the configuration module of webpack to implement the code. Real-time compilation

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to solve the processing exception of wx.request for JSON containing \u2028 in the WeChat applet

Detailed example of the use of keep-alive component of vue.js built-in component

The above is the detailed content of Detailed explanation of config/index.js: configuration in vue. For more information, please follow other related articles on the PHP Chinese website!