Explication détaillée de config/index.js : configuration dans vue

Cet article présente principalement l'explication détaillée de config/index.js : configuration dans vue. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Quand nous en avons besoin. Lors d'un déploiement séparé du backend, vous devez configurer config/index.js :

Dans le répertoire construit automatiquement avec vue-cli (configuration des variables d'environnement et des variables de base)

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

dans Pour la section 'build', nous avons les options suivantes :

build.index

doit être un chemin absolu sur le système de fichiers local.

index.html (avec le chemin de ressource inséré) sera généré.

Si vous utilisez ce modèle dans un framework en arrière-plan, vous pouvez modifier le chemin index.html pour spécifier le fichier généré par votre programme en arrière-plan. Par exemple, un programme Rails peut être app/views/layouts/application.html.erb, ou un programme Laravel peut être resources/views/index.blade.php.

build.assetsRoot

doit être un chemin absolu sur le système de fichiers local.

doit pointer vers le répertoire racine qui contient tous les actifs statiques de votre application. public/ Correspond à Rails/Laravel.

build.assetsSubDirectory

Les fichiers de ressources compilés et traités par webpack seront dans ce répertoire build.assetsRoot, ils ne peuvent donc pas être mélangés avec d'autres fichiers qui peuvent se trouver dans build.assetsRoot. Par exemple, si le paramètre build.assetsRoot est /path/to/dist et le paramètre build.assetsSubDirectory est static, alors toutes les ressources du webpack seront compilées dans le répertoire path/to/dist/static.

Avant chaque compilation, ce répertoire sera vidé, il ne pourra donc contenir que des fichiers ressources compilés. Les fichiers du répertoire

static/ seront directement copiés dans ce répertoire pendant le processus de construction. Cela signifie que si vous modifiez cette règle, toutes les adresses absolues des fichiers sur lesquels vous comptez dans static/ devront changer.

build.assetsPublicPath【资源的根目录】

Il s'agit du chemin URL parcouru via le serveur http. Dans la plupart des cas, il s'agit du répertoire racine (/). Si votre infrastructure backend nécessite des préfixes d'URL de ressources statiques, il vous suffit de modifier ce paramètre. En interne, ceci est géré par webpack comme output.publicPath.

S'il y a une exigence en arrière-plan, ajoutez généralement ./ ou ajoutez-le en fonction du répertoire spécifique, sinon les ressources statiques ne seront pas référencées

build.productionSourceMap

Si cela est nécessaire lors de la création de la version de l'environnement de production Activez la carte source.

dev.port

Port spécifique sur lequel le serveur de développement écoute

dev.proxyTable

Définissez les règles de proxy pour le serveur de développement.

Le config/index.js configuré dans le projet a des configurations pour les environnements de développement et de production. Ce qui suit est une compréhension de la configuration du webpack dans l'environnement de production

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

Ce qui suit. est en vue. Le fichier de configuration build/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 dans l'environnement de production

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

vue medium build/build Page .js

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

Entrée du projet, comme le montre le fichier package.json

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

Lorsque nous exécutons npm run dev / npm run build / npm run watch, node build/dev est exécuté -server.js ou node build/build.js ou node build/build-watch.js

node build/build-watch.js est le module de configuration de webpack basé sur la configuration de mon environnement de production. L'ajout de watch: true peut réaliser une compilation du code en temps réel

Ce qui précède est l'intégralité du contenu de cet article. J'espère que cela sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez payer. attention au site PHP chinois !

Recommandations associées :

Comment résoudre l'exception de traitement de wx.request pour JSON contenant u2028 dans l'applet WeChat

Exemple Explication détaillée de l'utilisation des composants keep-alive des composants intégrés de vue.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!