Detaillierte Erklärung von config/index.js: Konfiguration in Vue

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung von config/index.js vor: Die Konfiguration in Vue hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf zurückgreifen Bei getrennter Bereitstellung vom Backend müssen Sie config/index.js konfigurieren:

Im automatisch mit vue-cli erstellten Verzeichnis (Konfiguration von Umgebungsvariablen und Basisvariablen)

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 ' Abschnitt haben wir die folgenden Optionen:

build.index

muss ein absoluter Pfad im lokalen Dateisystem sein.

(mit dem eingefügten Ressourcenpfad) wird generiert.

index.htmlWenn Sie diese Vorlage in einem Hintergrund-Framework verwenden, können Sie den

-Pfad bearbeiten, um die von Ihrem Hintergrundprogramm generierte Datei anzugeben. Beispielsweise kann ein Rails-Programm

oder ein Laravel-Programm index.html sein. app/views/layouts/application.html.erbresources/views/index.blade.php

build.assetsRoot

muss ein absoluter Pfad im lokalen Dateisystem sein.

sollte auf das Stammverzeichnis verweisen, das alle statischen Assets Ihrer Anwendung enthält.

Entspricht Rails/Laravel.

public/

build.assetsSubDirectoryDie von Webpack kompilierten und verarbeiteten Ressourcendateien befinden sich in diesem

-Verzeichnis und können daher nicht mit anderen Dateien gemischt werden, die sich möglicherweise in

befinden. Wenn beispielsweise der Parameter build.assetsRoot build.assetsRoot und der Parameter build.assetsRoot /path/to/dist ist, werden alle Webpack-Ressourcen im Verzeichnis build.assetsSubDirectory kompiliert. staticpath/to/dist/staticDieses Verzeichnis wird vor jeder Kompilierung geleert, sodass es nur kompilierte Ressourcendateien enthalten kann. Die Dateien im Verzeichnis

werden während des Erstellungsprozesses direkt in dieses Verzeichnis kopiert. Das bedeutet, dass, wenn Sie diese Regel ändern, alle absoluten Adressen der Dateien, auf die Sie sich in

verlassen, geändert werden müssen. static/static/

build.assetsPublicPath【资源的根目录】Dies ist der URL-Pfad, der über den http-Server läuft. In den meisten Fällen ist dies das Stammverzeichnis (

). Wenn Ihr Backend-Framework statische Ressourcen-URL-Präfixe erfordert, müssen Sie nur diesen Parameter ändern. Intern wird dies vom Webpack als

behandelt. /output.publicPathWenn im Hintergrund eine Anforderung besteht, fügen Sie im Allgemeinen ./ hinzu oder fügen Sie es entsprechend dem spezifischen Verzeichnis hinzu, andernfalls wird nicht auf die statischen Ressourcen verwiesen

build.productionSourceMapOb es beim Erstellen der Produktionsumgebungsversion erforderlich ist. Aktivieren Sie die Quellkarte.

dev.portSpezifischer Port, den der Entwicklungsserver überwacht

dev.proxyTableDefinieren Sie die Proxy-Regeln für den Entwicklungsserver.

Die im Projekt konfigurierte Datei config/index.js enthält Konfigurationen für Entwicklungs- und Produktionsumgebungen. Das Folgende ist ein Verständnis der Webpack-Konfiguration in der Produktionsumgebung Build in vue. /webpack.base.conf.js

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
  }
}

webpack.prod.conf.js Konfigurationsdatei in der Produktionsumgebung

//引入依赖模块
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']
      })
    ]
  }
}

vue medium build/build.js-Seite

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,// 要把

Projekteintrag, wie aus der package.json-Datei hervorgeht

// 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')
})

Wenn wir npm run dev / npm run build / npm run watch, node build/dev-server.js oder node build/ ausführen build wird ausgeführt. js oder node build/build-watch.js

node build/build-watch.js basiert auf der Konfiguration der Produktionsumgebung, die ich konfiguriert und watch: true zum Webpack-Konfigurationsmodul hinzugefügt habe Um den Code zu implementieren, lesen Sie bitte den gesamten Inhalt dieses Artikels. Weitere Informationen finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So lösen Sie die wx.request-Verarbeitungsausnahme für JSON mit u2028 im WeChat-Applet

Beispiel Ausführliche Erläuterung der Verwendung von Keep-Alive-Komponenten der integrierten Komponenten von vue.js

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung von config/index.js: Konfiguration in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!