1. 文件开头的path模块提供了用于处理文件和目录路径的使用工具。utils是vue开发环境的wepack相关配置文件，主要用来处理css-loader和vue-style-loader。引入config目录下的index.js配置文件，主要用来定义一些开发和生产环境的属性。vue-loader.conf配置文件是用来解决各种css文件的，定义了诸如css,less,sass之类的和样式有关的loader 。
    const path = require( 'path')
    const utils = require( './utils')
    const config = require( '../config')
    const vueLoaderConfig = require( './vue-loader.conf')

  2. 关于文件中的exports输出对象：
    module. exports = {
    //运行环境的上下文，就是实际的目录
    context : path . resolve( __dirname, '../'),
    //入口文件
    entry : {
    app : './src/main.js'
    },
    //输出内容，这内部的配置会根据不同的运行环境来进行变化
    output : {
    path : config .build .assetsRoot,
    filename : '[name].js',
    publicPath : process . env .NODE_ENV === 'production' ?
    config .build .assetsPublicPath : config .dev .assetsPublicPath
    },
    resolve : {
    extensions : [ '.js', '.vue', '.json'],
    //extensions字段，指定检测的文件后缀
    alias : {
    //alias用于指定别名的。在引用文件路径中，如果有别名的符号，会被替换成指定的路径。
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve( 'src'),
    }
    },
    //module配置一些eslint、vue、js、图片资源、字体图标、文件等加载的loader。
    //安装项目依赖包之后，一般都要检查rules里面是否有对应的loader配置
    module : {
    rules : [{
    test : / \. vue $ /,
    loader : 'vue-loader',
    options : vueLoaderConfig
    },
    {
    test : / \. s [a|c] ss $ /,
    loader : [ "style-loader", "css-loader", "sass-loader"]
    },
    {
    test : / \. js $ /,
    loader : 'babel-loader',
    include : [
    resolve( 'src'),
    resolve( 'test'),
    resolve( 'node_modules/webpack-dev-server/client')
    ]
    },
    {
    test : / \. (png | jpe ? g | gif | svg)( \?. * ) ?$ /,
    loader : 'url-loader',
    options : {
    limit : 10000,
    name : utils . assetsPath( 'img/[name].[hash:7].[ext]')
    }
    },
    {
    test : / \. (mp4 | webm | ogg | mp3 | wav | flac | aac)( \?. * ) ?$ /,
    loader : 'url-loader',
    options : {
    limit : 10000,
    name : utils . assetsPath( 'media/[name].[hash:7].[ext]')
    }
    },
    {
    test : / \. (woff2 ?| eot | ttf | otf)( \?. * ) ?$ /,
    loader : 'url-loader',
    options : {
    limit : 10000,
    name : utils . assetsPath( 'fonts/[name].[hash:7].[ext]')
    }
    }
    ]
    },
    //node主要是阻止一些webpack的默认注入行为，因为在vue中，已经具备了这些功能
    node : {
    setImmediate : false,
    dgram : 'empty',
    fs : 'empty',
    net : 'empty',
    tls : 'empty',
    child_process : 'empty'
    }
    }
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue