面试官：自己搭建过vue开发环境吗？

最新推荐文章于 2023-06-27 09:02:44 发布
最新推荐文章于 2023-06-27 09:02:44 发布
阅读量353 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQ729533020/article/details/99740333
版权

640?wx_fmt=gif

开篇

前段时间，看到群里一些小伙伴面试的时候被面试官问到这类题目。平时大家开发vue项目的时候，相信大部分人都是使用 vue-cli脚手架生成的项目架构，然后 npm run install 安装依赖，npm run serve启动项目然后就开始写业务代码了。

但是对项目里的webpack封装和配置了解的不清楚，容易导致出问题不知如何解决，或者不会通过webpack去扩展新功能。

该篇文章主要是想告诉小伙伴们，如何一步一步的通过 webpack4来搭建自己的vue开发环境

首先我们要知道 vue-cli生成的项目，帮我们配置好了哪些功能？

  1. ES6代码转换成ES5代码

  2. scss/sass/less/stylus转css

  3. .vue文件转换成js文件

  4. 使用 jpg、png，font等资源文件

  5. 自动添加css各浏览器产商的前缀

  6. 代码热更新

  7. 资源预加载

  8. 每次构建代码清除之前生成的代码

  9. 定义环境变量

  10. 区分开发环境打包跟生产环境打包

  11. ....

640?wx_fmt=other

1. 搭建 webpack 基本环境

该篇文章并不会细讲 webpack 是什么东西，如果还不是很清楚的话，可以先去看看 webpack官网

简单的说，webpack是一个模块打包机，可以分析你的项目依赖的模块以及一些浏览器不能直接运行的语言jsx、vue等转换成 js、css文件等，供浏览器使用。

640?wx_fmt=other

1.1 初始化项目

在命令行中执行 npm init 然后一路回车就行了，主要是生成一些项目基本信息。最后会生成一个 package.json 文件

npm init

1.2 安装webpack

640?wx_fmt=other

1.3 写点小代码测试一下webpack是否安装成功了

新建一个src文件夹，然后再建一个main.js文件

console.log('hello webpack')

然后在 package.json 下面加一个脚本命令

640?wx_fmt=other

然后运行该命令

npm run serve

如果在 dist 目录下生成了一个mian.js文件，则表示webpack工作正常

2. 开始配置功能

  • 新建一个 build 文件夹，用来存放 webpack配置相关的文件

  • 在build文件夹下新建一个webpack.config.js，配置webpack的基本配置

  • 修改 webpack.config.js配置

640?wx_fmt=other

  • 修改package.json 文件，将之前添加的 serve 修改为

"serve": "webpack ./src/main.js --config ./build/webpack.config.js"

2.1 配置 ES6/7/8 转 ES5代码

  • 安装相关依赖

npm install babel-loader @babel/core @babel/preset-env

  • 修改webpack.config.js配置

640?wx_fmt=other

  • 在项目根目录添加一个 babel.config.js 文件

640?wx_fmt=other

  • 然后执行 npm run serve 命令，可以看到 ES6代码被转成了ES5代码了

2.1.1 ES6/7/8 Api 转es5

babel-loader只会将 ES6/7/8语法转换为ES5语法，但是对新api并不会转换。

我们可以通过 babel-polyfill 对一些不支持新语法的客户端提供新语法的实现

  • 安装

npm install @babel/polyfill

  • 修改webpack.config.js配置

在 entry 中添加 @babel-polyfill

640?wx_fmt=other

2.2 配置 scss 转 css

在没配置 css 相关的 loader 时，引入scss、css相关文件打包的话，会报错

  • 安装相关依赖

npm install sass-loader dart-sass css-loader style-loader -D

sass-loader, dart-sass主要是将 scss/sass 语法转为css

css-loader主要是解析 css 文件

style-loader 主要是将 css 解析到 html页面 的 style 上

  • 修改webpack.config.js配置

640?wx_fmt=other

2.3 配置 postcss 实现自动添加css3前缀

  • 安装相关依赖

npm install postcss-loader autoprefixer -D

  • 修改webpack.config.js配置

640?wx_fmt=other

  • 在项目根目录下新建一个 postcss.config.js

640?wx_fmt=other

2.3 使用 html-webpack-plugin来创建html页面

使用 html-webpack-plugin来创建html页面，并自动引入打包生成的js文件

  • 安装依赖

npm install html-webpack-plugin -D

  • 新建一个 public/index.html 页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

2.4 配置 devServer 热更新功能

通过代码的热更新功能，我们可以实现不刷新页面的情况下，更新我们的页面

  • 安装依赖

npm install webpack-dev-server -D

  • 修改webpack.config.js配置

通过配置 devServer 和 HotModuleReplacementPlugin 插件来实现热更新

640?wx_fmt=other

2.5 配置 webpack 打包 图片、媒体、字体等文件

  • 安装依赖

npm install file-loader url-loader -D

file-loader 解析文件url，并将文件复制到输出的目录中

url-loader 功能与 file-loader 类似，如果文件小于限制的大小。则会返回 base64 编码，否则使用 file-loader 将文件复制到输出的目录中

  • 修改 webpack-config.js 配置 添加 rules 配置，分别对 图片，媒体，字体文件进行配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
  
  module: {
    rules: [
      
      {
        test: /\.(jpe?g|png|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 4096,
              fallback: {
                loader: 'file-loader',
                options: {
                    name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 4096,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'media/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 4096,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'fonts/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
    ]
  },
  plugins: [
    
  ]
}

3. 让 webpack 识别 .vue 文件

  • 安装需要的依赖文件

npm install vue-loader vue-template-compiler cache-loader thread-loader -D
npm install vue -S

vue-loader 用于解析.vue文件

vue-template-compiler 用于编译模板

cache-loader 用于缓存loader编译的结果

thread-loader 使用 worker 池来运行loader，每个 worker 都是一个 node.js 进程。

  • 修改 webpack.config.js配置

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  
  mode: 'development',
  entry: {
    
  },
  output: {
    
  },
  devServer: {
    
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.runtime.esm.js'
    },
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'cache-loader'
          },
          {
            loader: 'thread-loader'
          },
          {
            loader: 'vue-loader',
            options: {
              compilerOptions: {
                preserveWhitespace: false
              },
            }
          }
        ]
      },
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'cache-loader'
          },
          {
            loader: 'thread-loader'
          },
          {
            loader: 'babel-loader'
          }
        ]
      },
      
    ]
  },
  plugins: [
    
    new VueLoaderPlugin()
  ]
}

  • 测试一下

  1. 在 src 新建一个 App.vue

// src/App.vue
<template>
  <div class="App">
    Hello World
  </div>
</template>

<script>
export default {
  name: 'App',

  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
@import './assets/styles/var.scss';
.App {
  color: $primary-color;
}
</style>

  1. 修改 main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

  1. 运行一下

npm run serve

4. 定义环境变量

通过 webpack提供的DefinePlugin插件，可以很方便的定义环境变量

plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        VUE_APP_BASE_URL: JSON.stringify('http://localhost:3000')
      }
    }),
]

5. 区分生产环境和开发环境

新建两个文件

  • webpack.dev.js 开发环境使用

  • webpack.prod.js 生产环境使用

  • webpack.config.js 公用配置

  • 开发环境与生产环境的不同

5.1 开发环境

  1. 不需要压缩代码

  2. 需要热更新

  3. css不需要提取到css文件

  4. sourceMap

  5. ...

5.2 生产环境

  1. 压缩代码

  2. 不需要热更新

  3. 提取css，压缩css文件

  4. sourceMap

  5. 构建前清除上一次构建的内容

  6. ...

  • 安装所需依赖

npm i @intervolga/optimize-cssnano-plugin mini-css-extract-plugin clean-webpack-plugin webpack-merge copy-webpack-plugin -D

  1. @intervolga/optimize-cssnano-plugin 用于压缩css代码

  2. mini-css-extract-plugin 用于提取css到文件中

  3. clean-webpack-plugin 用于删除上次构建的文件

  4. webpack-merge 合并 webpack配置

  5. copy-webpack-plugin 用户拷贝静态资源

5.3 开发环境配置

  • build/webpack.dev.js


const merge = require('webpack-merge')
const webpackConfig = require('./webpack.config')
const webpack = require('webpack')
module.exports = merge(webpackConfig, {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  module: {
    rules: [
      {
        test: /\.(scss|sass)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('dart-sass')
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development')
      }
    }),
  ]
})

  • webpack.config.js


const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  entry: {
    
    main: path.resolve(__dirname, '../src/main.js')
  },
  output: {
    
    path: path.resolve(__dirname, '../dist'),
    
    filename: 'js/[name].[hash:8].js',
    
    chunkFilename: 'js/[name].[hash:8].js',
    
    publicPath: '/'
  },
  devServer: {
    hot: true,
    port: 3000,
    contentBase: './dist'
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.runtime.esm.js'
    },
    extensions: [
      '.js',
      '.vue'
    ]
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'cache-loader'
          },
          {
            loader: 'vue-loader',
            options: {
              compilerOptions: {
                preserveWhitespace: false
              },
            }
          }
        ]
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader'
      },

      {
        test: /\.(jpe?g|png|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 4096,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 4096,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'media/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 4096,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'fonts/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin(),

    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../public/index.html')
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ]
}

5.4 生产环境配置

const path = require('path')
const merge = require('webpack-merge')
const webpack = require('webpack')
const webpackConfig = require('./webpack.config')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssnanoPlugin = require('@intervolga/optimize-cssnano-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = merge(webpackConfig, {
  mode: 'production',
  devtool: '#source-map',
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          test: /[\\\/]node_modules[\\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        common: {
          name: 'chunk-common',
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.(scss|sass)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('dart-sass')
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: 'production'
      }
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].[contenthash:8].css'
    }),
    new OptimizeCssnanoPlugin({
      sourceMap: true,
      cssnanoOptions: {
        preset: [
          'default',
          {
            mergeLonghand: false,
            cssDeclarationSorter: false
          }
        ]
      }
    }),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../public'),
        to: path.resolve(__dirname, '../dist')
      }
    ]),
    new CleanWebpackPlugin()
  ]
})

5.5 修改package.json

"scripts": {
    "serve": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
},

6 总结

到目前为止，我们已经成功的自己搭建了一个 vue 开发环境，不过还是有一些功能欠缺的，有兴趣的小伙伴可以交流交流。在搭建过程中，还是会踩很多坑的。

如果还不熟悉 webpack 的话，建议自己搭建一次。可以让自己能深入的理解 vue-cli 替我们做了什么

640?wx_fmt=other

 热 文 推 荐 

☞ 浏览器中的垃圾回收与内存泄漏

☞ Web 组件势必取代前端？

☞ 作为一个开发者，我创业了

☞ 如何优雅处理前端的异常？

☞ 从0到1完成一个Babel插件

640?wx_fmt=png

640?wx_fmt=png

你也“在看”吗？

lentoo-
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 项目打包报错 CSS minification error
willsoooo的博客
09-21 2610
但是，我的代码里并不存在这种问题，最后，我看控制台的报错提示，在node_modules的某个资源文件夹中，并查找相关资源，找到@intervolga 文件夹下index.js 把报错的throw new Error注释了。今天在打包vue的项目时候，会出现了一个问题，在控制台报错 CSS minification error。这是第一次遇到这问题，网上查找了一边，基本都是提示css的语法错误。
npm install(报错)
weixin_46166771的博客
05-22 6690
2、使用npm install --legacy-peer-deps。1、npm install 报错（如图）
vue项目sass-loader安装(vue项目sass-loader安装错误解决）
weixin_49046136的博客
05-20 1万+
vue项目sass-loader安装(vue项目sass-loader安装错误解决）
搭建VUE大屏展示项目（二）框架搭建
zhaohan___的博客
07-14 1702
文章目录DataV安装插件ElementUI错误感谢开源社区github地址 DataV 官方网站: http://datav.jiaminghi.com/guide/#%E5%88%9B%E5%BB%BAvue%E9%A1%B9%E7%9B%AE 安装： npm install @jiaminghi/data-view 引入： import dataV from '@jiaminghi/data-view' export default (app) => { app.use('dataV'
Vue-cli 3.x 脚手架搭建的 Vue 2.x 项目进行 npm install 安装时报错: npm ERR! code 1……
qq_40868156的博客
04-25 9600
vue 脚手架项目，vue 2.0，npm install 报错， npm ERR! code 1 npm ERR! path D:\Gree_project\web_cloud_wms\node_modules\node-sass npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
vue环境搭建
04-03
下面将详细介绍如何搭建Vue.js的开发环境。 首先，我们需要安装Node.js，因为Vue的依赖管理和构建工具主要依赖于Node.js的包管理器npm（Node Package Manager）。Node.js不仅提供了JavaScript的运行环境，还包含了...
详解Weex基于Vue2.0开发模板搭建
12-04
前言 最近有一些人反馈说在面试过程中常常被问到weex相关的知识，也侧面反映的weex的发展还是很可观的，可是目前weex的开发者大多数是中小型公司或者个人，大公司屈指可数，揪其...关于weex开发环境搭建问题见官方文档
vue面试提库，内容丰富
最新发布
10-11
Vue.js 是一款轻量级的前端JavaScript框架，以其易学易用、高性能和组件化的特点在Web开发领域受到广泛欢迎。对于求职者来说，掌握Vue.js技能并了解相关的面试知识点至关重要。以下是一些关于Vue.js面试的重要知识点...
VUE面试46个知识点，涵盖全面，附有代码示例
03-15
在面试过程中，面试官通常会从多个角度考察Vue开发者的技术水平，包括基础概念、组件设计、响应式原理、生命周期、指令系统、插件使用、Vuex状态管理、Vue Router路由、性能优化等。以下是对46个Vue面试知识点的详细...
谈谈常见的vue面试题
03-29
Vue-cli是Vue.js的脚手架工具，用于快速搭建项目结构和配置，它集成了webpack等构建工具，简化了项目初始化和开发流程。 Virtual DOM是现代前端框架为了提高性能而引入的概念，Vue.js也使用了这一技术。Virtual DOM...
intervolga-test-task-2
04-17
intervolga-test-task-2 指示 配置服务器（ misc/apache2.conf Apache2的配置示例）。 Web根目录必须指向public_html文件夹。 所有对不存在文件的请求都应重定向到public_html/index.php （请参阅public_html/.htaccess ）。 （如果进行了相应的配置，则该项目也将在nginx下运行。） 复制/重命名config/db.php的config/db.php.dist ，指定用于访问数据库的数据。 非MySQL数据库下的项目工作尚未经过测试（使用PDO）。 使用phpmyadmin或其他方法导入数据库转储（ misc/db_dump.sql ）。 在浏览器中打开该站点。 主页上的“国家/地区”链接可引出测试任务的解决方案。
optimize-cssnano-plugin:在ExtractTextPluging之后用于CSS缩小的WebPack 2+插件
05-02
优化cssnano插件 它将在Webpack构建期间搜索CSS资产，并使用将其最小化。 解决 CSS复制问题。 就像但是使用源映射更加准确。 安装： 使用npm： npm install --save-dev @intervolga/optimize-cssnano-plugin 配置： const OptimizeCssnanoPlugin = require ( '@intervolga/optimize-cssnano-plugin' ) ; module . exports = { module : { loaders : [ { test : / \. css $ / , loader : ExtractTextPlugin . extract ( "style-loader" , "css-loader" )
vue-cli 3.0 与 framework7 的一个 css 问题
weixin_34018202的博客
08-16 1339
发现问题 看到 vue-cli3 和 framework7 都升级到3.0了,团队打算用新版本做些新东西.有 https://github.com/framework7... 和 vue-cli3 中文文档的加成, 开始还算顺利, npm run serve 也能把项目跑起来. 但是 npm run build 打包的时候发生问题了. 报...
webpack打包并压缩css报错
Vintage
03-07 2513
最近跟着视频学习webpack4.x，视频内容算是比较新的了，不过在跟着视频敲代码的时候，还是遇到了报错，报错截图如下： 截图中黄色标记出来的部分是报错的主要信息，当前主要的webpack配置代码如下： const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin')...
安装依赖时报错：npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving
EFFY
06-27 3339
然后npm intall即可，笔者习惯用yarn，它更快一点。原因是node版本太高，降低版本即可。npm run serve报错。输入如下代码，即可安装成功。
前端面试总结（vue篇）
热门推荐
weixin_43734732的博客
07-21 2万+
vue的优点 1、vue是个轻量级的框架，是一个构建数据的视图集合，大小只有几十Kb 2、vue是组件化开发，适合多人开发 3、vue中的双向数据绑定更方便操作表单数据 4、因为vue是MVVM的框架，视图，数据，结构分离使数据的更改更为简单 5、vuex可以管理所有组件用到的数据，不需要借助之前props在组件间传值 6、官方文档通俗易懂，易于理解和学习； vue父子组件之间传递数据 1、父组件向子组件传递数据 通过props，例子如下 <template> <div> .
vue面试题
weixin_47027269的博客
03-31 252
事件修饰符.stop 阻止冒泡.prevent 组织默认行为.capture 内部元素触发的事件先在此处理.self 只有再event.target是当前元素时触发.once 事件只会触发一次.passive 立即触发默认行为.native 把当前元素作为原生标签看待按键修饰符.keyup 键盘弹起.keydown 键盘按下系统修饰符.ctrl.alt.meta鼠标修饰符.left 鼠标左键.right 鼠标右键。
面试必备:VUE面试题(含答案)
xiaozgm的博客
07-08 2万+
面试必备:VUE面试题(含答案)
快速指南：Vue开发环境的Windows安装与项目搭建
本文档详细介绍了如何搭建Vue开发环境，主要分为三个部分：工具安装、WebStorm的安装与使用以及项目搭建和启动。 首先，**工具安装**部分着重于Node.js的安装。Node.js是Vue开发的基础，因为它提供了JavaScript运行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值