vue--加载模块详解

Posted 2022-09-01 xujianwu

1、postcss-loader、autoprefixer、css-loader 、sass-loader：加载css模块及css预处理模块，添加浏览器前缀到CSS内容里

加载模块：npm install postcss-loader autoprefixer css-loader sass-loader -D
在webpack基础环境配置中添加：

rules: [
  
    test: /\.scss/, //css预处理器 后缀名.scss
    use: [
      ‘vue-style-loader‘, //将css以js形式插入html中
      ‘css-loader‘, //专门处理css文件
      
        loader: "postcss-loader",
        options: 
          sourceMap: true, //直接使用前面生成的sourceMap，编译的效率会快点
        
      ,
      ‘sass-loader‘ //专门处理sass文件，转为css文件，不处理css
    ]
  
]

在项目根目录创建 postcss.config.js，并且设置支持哪些浏览器，内容如下：

const autoprefixer = require(‘autoprefixer‘);
module.exports = 
    plugins: [
      require(‘autoprefixer‘)(
        "overrideBrowserslist": [
          "defaults",
          "not ie < 11",
          "last 2 versions",
          "> 1%",
          "ios 7",
          "last 3 iOS versions"
        ]
      )
    ]

• 主流浏览器最近2个版本用“last 2 versions”；
• 全球统计有超过1%的使用率使用“>1%”;
• 仅新版本用“ff>20”或”ff>=20″

2、webpack、webpack-cli：包管理工具 webpack-cli是webpack 4.0 之后都需要装的

3、cross-env：不同平台环境变量配置

解决不同平台直接设置环境变量（如window上使用配置环境需要在NODE_ENV=development前加set）而通过cross-env NODE_ENV=development 可以让我们在不同的平台上执行脚本；

加载模块：npm install cross-env -D
在package.json中修改以下命令：
"scripts": 
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "cross-env NODE_ENV=development webpack --config build/webpack.dev.config.js",
  "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.config.js"

cross-env NODE_ENV=development 作用：不同平台上设置区分环境变量（开发与生产）

通过设置 const isDev = process.env.NODE_ENV === ‘development‘ 判断环境是否为开发或生产环境

当然这里已经在package.json中配置好了不同环境，只要执行不同的命令就能在指定的环境下启动项目。

4、服务器热更新启动模块加载

webpack-dev-server：webpack服务器的热更新

（专门用于开发模式）监听文件的变化、监听端口号，是否自动打开浏览器并自动刷新网页，做到实时预览

加载模块：npm install webpack-dev-server -D

加载模块好以后，需要在package.json文件中添加一条指令用来启动webpack-dev-server

"scripts": 
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.config.js",
  "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.config.js"

5、webpack-merge：使用webpack-merge的包来进行两个webpack配置之间的合并

在vue中主要是将不同环境下的webpack配置参数与基础配置参数合并（用优雅的方式提取公共配置部分的代码），使用方式如下：

加载模块：npm install webpack-merge -D

// 引入基本webpack基本配置
const baseWebpackConfig = require(‘./webpack.base.config‘);

//将基本配置与dev环境配置合并，然后导出
const devWebpackConfig = merge(baseWebpackConfig,
　　module:
　　devServer:
）

module.exports = devWebpackConfig;

6、Babel配置

作用：在webpack 中，默认只能处理 一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的；这时候就需要 借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把 高级语法转为 低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中通过Babel，可以帮我们将高级的语法转换为低级的语法。

 npm install babel-core babel-loader babel-plugin-transform-runtime -D

 npm install babel-preset-env babel-preset-stage-2 -D

 npm install babel-plugin-transform-vue-jsx babel-plugin-syntax-jsx babel-helper-vue-jsx-merge-props -D

babel-polyfill 解决不同浏览器低版本不兼容问题（主要是IE的兼容）
因为ie9和一些低版本的高级浏览器对es6新语法并不支持

npm install  babel-polyfill -D

在main.js及vuex入口文件中最上一行引入：
import ‘babel-polyfill‘

 

7、copy-webpack-plugin: 将static或XX目录拷贝到打包之后的dist文件下

加载插件：npm install copy-webpack-plugin -D
const CopyWebpackPlugin = require(‘copy-webpack-plugin‘);

//在配置中加入以下内容：
plugins:[
  new CopyWebpackPlugin([//复制插件
    
      from: path.resolve(__dirname, ‘../static‘),
      to: baseconfig.dev.assetsSubDirectory,
      ignore: [‘.*‘]//忽略.*的文件
    
  ])
],

8、generate-asset-webpack-plugin 实现vue打包后生成配置文件用以外部修改公共路径（专用于生产环境）

第一步：安装generate-asset-webpack-plugin插件
npm install --save-dev generate-asset-webpack-plugin
第二步：在根目录下添加serverConfig.json的配置文件,内容如下：

  "ApiUrl":"http://localhost:8082/",

第三步：在build/webpack.prod.config.js文件里引入generate-asset-webpack-plugin

const GeneraterAssetPlugin = require(‘generate-asset-webpack-plugin‘)

第四步：引入添加的serverConfig.json文件

const serverConfig = require(‘../serverConfig.json‘)

第五步：添加打包时写入配置文件的代码

const createServerConfig = function(compilation)
  return JSON.stringify(serverConfig);

第六步：添加打包时输出配置文件的代码

plugins:[
  //让打包的时候输入可配置的文件
  new GenerateAssetPlugin(
    filename: ‘serverconfig.json‘,
    fn: (compilation, cb) => 
      cb(null, createServerConfig(compilation));
    ,
    extraFiles: []
  ),
]

第七步：在main.js中添加读取build之后的代码(我这里通过axios实现异步调取)

Vue.prototype.getConfigJson = function () 
  axios.get(‘serverConfig.json‘).then((result)=>
    Vue.prototype.ApiUrl =result.data.ApiUrl;//设置成Vue的全局属性 ApiUrl:域名接口
    new Vue(
      router,
      store,
      render: (h) => h(App)
    ).$mount(‘#root‘);
  ).catch((error)=>
    console.log(error)
  )

第八步：项目中引用
vue文件中直接引用 this.ApiUrl

9、html-webpack-plugin：这个插件可以帮助生成 HTML 文件，在 body 元素中，使用 script 来包含所有你的 webpack bundles

npm install html-webpack-plugin --save-dev

// 文件名及时更改，自动打包并且生成响应的文件在index.html里面
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

//将以下内容放入plugin中
new HtmlWebpackPlugin(
  template: path.join(__dirname,‘../index.html‘)
)

10、lockr：帮助你轻松使用localStorage，让使用本地存储保存对象、数组、数字、字符串省略很多步骤。

npm install lockr -D

11、mini-css-extract-plugin：将CSS提取出来，单独作为一个文件。它为每一个包含CSS的JS文件创建一个CSS文件。它支持CSS和资源映射的按需加载

相比较extract-text-webpack-plugin有以下不同：

• 异步加载
• 没有复制编译（执行效率）
• 更易于使用

npm install mini-css-extract-plugin -D

const miniCssExtractPlugin=require("mini-css-extract-plugin"); // css单独提取打包

生产环境中在webpack配置文件中的plugins加入以下内容：

plugins: [
   new miniCssExtractPlugin(filename: ‘css/main.[contentHash:8].css‘),
]

添加 publicPath: ‘../‘ 是为了解决背景图片在打包后路径不对的问题（背景图片通过css预处理器加载的会将static当成根目录）

module: 
    rules: [
      
        test: /\.scss/, //css预处理器 后缀名.scss
        use: [
          
            loader:miniCssExtractPlugin.loader,
            options:
              publicPath: ‘../‘
            
          ,
          ‘css-loader‘, //专门处理css文件
          
            loader: "postcss-loader",
            options: 
              sourceMap: true, //直接使用前面生成的sourceMap，编译的效率会快点
            
          ,
          ‘sass-loader‘ //专门处理sass文件，转为css文件，不处理css
        ]
      
    ]
  ,

12、使用sass：css预处理器需要加载 node-sass、sass-loader、style-loader   --类似的右less、style预处理器（这里用sass）

npm install node-sass sass-loader style-loader -D

  module: 
    rules: [
      
        test: /\.scss/, //css预处理器 后缀名.scss
        use: [
          ‘vue-style-loader‘, //将css以js形式插入HTML中
          ‘css-loader‘, //专门处理css文件
          
            loader: "postcss-loader",
            options: 
              sourceMap: true, //直接使用前面生成的sourceMap，编译的效率会快点
            
          ,
          ‘sass-loader‘ //专门处理sass文件，转为css文件，不处理css
        ]
      
    ]
  ,

<style lang="scss" scoped>

</style>

13、optimize-css-assets-webpack-plugin：压缩单独的css文件

在之前版本中我们使用extract-text-webpack-plugin来提取CSS文件，不过在webpack 4.x中则应该使用mini-css-extract-plugin来提取CSS到单独文件中

在Webpack 4.x中，新增了optimization的选项来代替之前版本中的webpack.optimize等。在optimization选项中，我们可以进行详细的设置，以达到分离CSS，分离Chunk，压缩文件等等操作

npm install optimize-css-assets-webpack-plugin -D

const OptimizeCSSAssetsPlugin = require(‘optimize-css-assets-webpack-plugin‘);

在module中添加：

  optimization: 
　　　//压缩单独css文件
    minimizer: [
      new OptimizeCSSAssetsPlugin(),
    ],
　　　//分离js文件
    splitChunks: 
      chunks: ‘all‘
    ,
    runtimeChunk: true // webpack相关代码打包到一个文件中，好处：可以规避新的模块加入的时候，webpack给新的模块加id后，插入的顺序可能在中间，使后面模块id变化，会导致打包出的hash产生变化，这样hash就不能进行常缓存
  ,

 14、qrcodejs2：二维码生成器

npm install qrcodejs2 -D
在组件中引入：

import QRCode from ‘qrcodejs2‘  // 引入qrcode

<div id="qrcode"></div> <!-- 创建一个div，并设置id为qrcode -->

 mounted () 
   this.qrcode();
 ,
 methods: 
   qrcode() 
     let qrcode = new QRCode(‘qrcode‘, 
       width: 132,  
       height: 132,
       text: ‘https://www.baidu.com‘, // 二维码地址
       colorDark : "#000",
       colorLight : "#fff",
     )
   ,
 

15、rimraf：以包的形式包装rm -rf命令，用来删除文件和文件夹的，不管文件夹是否为空，都可删除（这里用做打包文件的每次打包时删除）

npm install rimraf -D

  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.config.js",
    "clean": "rimraf dist",
    "build:pro": "cross-env NODE_ENV=production webpack --config build/webpack.prod.config.js",
    "build": "npm run clean && npm run build:pro"
  ,

16、vue-lazyload：懒加载

npm install vue-lazyload --D

import Vue from ‘vue‘
import App from ‘@/App‘
import VueLazyload from ‘vue-lazyload‘

Vue.use(VueLazyload, 
  preLoad: 1,    //预加载高度的比例
  error: ‘‘,  //图像的src加载失败
  loading: ‘‘, //src的图像加载
  attempt: 1,  //尝试计数
  listenEvents: [ ‘scroll‘, ‘mousewheel‘ ] //监听事件
);

17、vue-template-compiler：将template语法转为render函数,那么常见的操作如下：

import Vue from ‘vue‘
import App from ‘./pages/app.vue‘;

new Vue(
    el:‘#root‘,
    render:h=>h(App)
)

18、vue-wechat-title：动态修改tilte（网页标题）

npm vue-wechat-title --D

main.js中引入：
import VueWechatTitle from ‘vue-wechat-title‘
Vue.use(VueWechatTitle);

然后在路由配置中添加meta：
meta:
    title:‘首页‘,
    requireAuth:true
,

在App.vue文件中使用
<div v-wechat-title="$route.meta.title">
或
<router-view v-wechat-title="$route.meta.title"></router-view>

19、vuex、vuex-persistedstate：使用vuex管理数据，vuex-persistedstate实现数据持久化

加载模块：
npm install vuex vuex-persistedstate -D

在vuex初始化时候，作为组件引入。
import Vue from ‘vue‘;
import ‘babel-polyfill‘
import Vuex from ‘vuex‘;
import common from ‘./modules/common‘;
import buy_ticket from ‘./modules/buy_ticket‘;
import createPersistedState from ‘vuex-persistedstate‘
//使用 vuex-persistedstate  这是一个用于 vuex 在页面刷新之间处理和存储状态的插件。

Vue.use(Vuex);
export default () => 
  return  new Vuex.Store(
    modules: 
      common:common,
      buy_ticket:buy_ticket,
    ,
    plugins: [createPersistedState()]
  )
;

 仅用作个人记录，有什么建议可以留言