Webpack 搭建 Vue.js 项目并进行不同PC端屏幕适配、配置中文标题

怼烎@ 2022-10-06 00:45 148阅读 0赞

### 1、Webpack 搭建 Vue.js 项目 ###

*  安装 node 环境  
    node.js 官网下载地址：https://nodejs.org/zh-cn/
 *  安装 Vue

npm install vue

*  安装 vue-cli

npm install --global vue-cli

*  安装 vue/cli-init

npm install --global @vue/cli-init

> 不安装 vue/cli-init 执行 vue init webpack webpack-vue-demo 创建 webpack 项目，报错如下：  
> Command vue init requires a global addon to be installed.  
> Please run yarn global add @vue/cli-init

*  安装 webpack

npm install --global webpack

*  安装 webpack-dev-server

npm install --global webpack-dev-server

*  Webpack 搭建 Vue.js 项目

vue init webpack webpack-vue-demo

*  运行 vue 项目

cd webpack-vue-demo
    npm run dev

*  浏览器访问：http://localhost:8080，即可打开搭建的 Vue.js 项目。
 *  项目目录结构如下：

![在这里插入图片描述][20210610122053932.png_pic_center]

### 2、不同 PC 端屏幕适配 ###

*  安装 lib-flexible

npm install lib-flexible --save

*  安装 px2rem-loader

npm install px2rem-loader --save

*  在项目入口文件 main.js 中引入 lib-flexible

import 'lib-flexible'

*  在 build/utils.js 中添加如下代码：

exports.cssLoaders = function (options) { 
      options = options || { }
    
      const cssLoader = { 
        loader: 'css-loader',
        options: { 
          sourceMap: options.sourceMap
        }
      }
    
      const px2remLoader = { 				// 添加的代码
        loader: 'px2rem-loader',
        options: { 
          remUnit: 60
        }
      }
    
      const postcssLoader = { 
        loader: 'postcss-loader',
        options: { 
          sourceMap: options.sourceMap
        }
      }

*  将 px2remLoader 放入 loaders 数组中

function generateLoaders (loader, loaderOptions) { 
        const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    
        if (loader) { 
          loaders.push({ 
            loader: loader + '-loader',
            options: Object.assign({ }, loaderOptions, { 
              sourceMap: options.sourceMap
            })
          })
        }

*  重启项目：`npm run dev`

### 3、解决 webpack-dev-server 无法自动编译热更新 ###

*  WebStorm 中关闭 safe write（安全写入）功能：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]

### 4、配置中文标题 ###

如果项目每个页面的标题不同，在 router/index.js 中配置：

import Vue from 'vue'
    import Router from 'vue-router'
    import Login from '@/views/Login'
    import Index from '@/views/Index'
    import { notification} from "ant-design-vue";
    
    Vue.use(Router)
    
    const router = new Router({ 
      mode: 'history',
      routes: [
        { 
          path: '/',
          redirect: '/index'
        },
        { 
          path: '/login',
          name: 'Login',
          component: Login,
          meta: { 
          	title: '登录'
          }
        },
        { 
          path: '/index',
          name: 'Index',
          component: Index,
          meta: { 
          	title: '首页'
          }
        }
      ]
    })
    
    
    router.beforeEach((to, from, next) => { 
    	if (to.meta.title) { 
    		document.title = to.meta.title
    	}
        if (to.path == '/login' || localStorage.getItem("token")) { 
            next()
        } else { 
            notification.open({ 
                message: '登录提示',
                description: '您还未登录或Token已过期，请重新登录'
            })
            return next("/login")
        }
    })
    
    export default router

如果项目每个页面的标题都相同，则在项目入口页面 index.html 中设置 title 为项目标题：

## index.html
    
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>信息管理平台</title>
      </head>
      <body>
        <div id="app"></div>
      </body>
    </html>

### 5、代码示例 ###

## module1.js
    
    import module2 from "./module2.js"
    export default { 
        f1: function () { 
            console.log(1);
        },
        obj: { 
            a: 123,
            b: mode2
        }
    }

## module2.js
    
    export default 4554;

## module3.js
    
    /*export function f2() { console.log('f2') } export function f3() { console.log('f3') } export function f4() { console.log('f4') }*/
    
    function class1() { 
    
    }
    class1.prototype.f2 = function () { 
        console.log('f2')
    }
    class1.prototype.f3 = function () { 
        console.log('f3')
    }
    class1.prototype.f4 = function () { 
        console.log('f4')
    }
    module.exports = class1

## app.js
    
    import mode1 from "./module/mode1.js"
    import class1 from "./module/module3.js"
    import $ from "jquery";
    import icon from "./img/icon.png"
    import d from "./img/d.png"
    import ewm from "./img/ewm.jpg"
    
    $.extend({  a: 1 })
    var iconImage = new Image();
    iconImage.src = icon
    var dImage = new Image();
    dImage.src = d
    var ewmImage = new Image();
    ewmImage.src = ewm
    
    class1.f2();
    import "./css/test.css"
    import "./css/test1.less"
    const a = 444;
    var b = 999;
    console.log(a);
    setInterval(() => { 
        console.log(b++)
    }, 500)
    mode1.f1();
    console.log(mode1.obj.b)

## app2.js
    
    import mode1 from "./module/mode1.js"
    import _ from "lodash"
    
    _.add(123, 10);
    mode1.f1();
    console.log(mode1.obj.b)

## package.json
    
    { 
      "name": "code",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { 
        "test": "echo \"Error:a no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": { 
        "@babel/core": "^7.14.6",
        "@babel/preset-env": "^7.14.7",
        "babel-loader": "^8.2.2",
        "css-loader": "^6.1.0",
        "css-minimizer-webpack-plugin": "^3.0.2",
        "file-loader": "^6.2.0",
        "html-webpack-plugin": "^5.3.2",
        "image-webpack-loader": "^7.0.1",
        "imagemin": "^8.0.0",
        "imagemin-gifsicle": "^7.0.0",
        "imagemin-mozjpeg": "^9.0.0",
        "imagemin-pngquant": "^9.0.2",
        "img-loader": "^4.0.0",
        "jquery": "^3.6.0",
        "less": "^4.1.1",
        "less-loader": "^10.0.1",
        "lodash": "^4.17.21",
        "mini-css-extract-plugin": "^2.1.0",
        "style-loader": "^3.1.0",
        "url-loader": "^4.1.1",
        "webpack": "^5.45.1",
        "webpack-cli": "^4.7.2",
        "webpack-dev-server": "^3.11.2"
      },
      "devDependencies": { 
        "extract-text-webpack-plugin": "^4.0.0-beta.0"
      }
    }

## webpack.config.js
    
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const cssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
    // optimize-css-assets-webpack-plugin 旧版webpack使用的CSS压缩工具
    
    module.exports = { 
        mode: "development",
        entry: { 
            app: "./app.js",
            app2: "./app2.js"
        },
        optimization: { 
            splitChunks: { 
                // async表示只从异步加载得模块（动态加载import()）里面进行拆分，initial表示只从入口模块进行拆分，all表示以上两者都包括
                chunks: 'all',
                minSize: 0,
                cacheGroups: { 
                    vendors: { 
                        test: /[\\/]node_modules[\\/]/,
                        priority: -10
                    }
                }
            }
        },
        output: { 
            path: __dirname + "/dist/",
            filename: "[name].js"
        },
        devServer: { 
            port: 3000,
            hot: true,
            hotOnly: true,
            proxy: { 
                '/api': 'http://localhost:3000',
            },
            /*proxy: { '/api': { target: 'http://localhost:3000', pathRewrite: { '^/api': '' }, }, },*/
        },
        module: { 
            rules: [
                /* { test: /\.css$/, use: extractPlugin.extract( { fallback: { loader: "style-loader" }, use: [ { loader: "css-loader" } ] } ) }*/
                { 
                    test: /\.js$/,
                    use: [{ 
                        loader: "babel-loader",
                        options: { 
                            presets: [
                                [
                                    "@babel/preset-env", { 
                                        targets: { 
                                            browsers: [">1%", "ie>=7"]
                                        }
                                    }
                                ]
                            ],
                            plugins: []
                        }
                    }]
                },
                { 
                    test: /\.css$/,
                    use: [MiniCssExtractPlugin.loader, "css-loader"],
                },
                { 
                    test: /\.less$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        "css-loader",
                        "less-loader"
                    ]
                },
                { 
                    test: /\.(jpg|png|jpeg|gif)$/,
                    use: [{ 
                            loader: 'url-loader',
                            options: { 
                                limit: 5000,
                                name: '[name]-[hash:10].[ext]',
                            }
                        },
                        { 
                            loader: 'image-webpack-loader',
                            options: { 
                                mozjpeg: { 
                                    quality: 65
                                },
                                pngquant: { 
                                    speed: 4
                                },
                            }
                        },
                        { 
                            loader: "img-loader",
                            options: { 
                                plugins: [
                                    require("imagemin-pngquant")({ 
                                        // 压缩 png 插件，取值范围 1-11，值越大压缩率越小，值越小压缩生成的文件越小，默认为4
                                        speed: 4,
                                    }),
    
                                    require("imagemin-mozjpeg")({ 
                                        // 压缩 jpg 插件，取值范围1-100，值越大压缩率越小，值越小压缩生成的文件越小
                                        quality: 50,
                                    }),
                                ],
                            },
                        },
                    ]
                },
            ]
        },
        plugins: [
            new MiniCssExtractPlugin({ 
                filename: "test.css"
            }),
            new HtmlWebpackPlugin({ 
                template: "./index.html",
                filename: "index.html",
                minify: { 
                    removeComments: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true
                }
            }),
            new webpack.DllReferencePlugin({ 
                manifest: require("./dll/vendor-manifest.json")
            }),
        ]
    }

## webpack.dll.js
    
    const webpack = require('webpack');
    module.exports = { 
        entry: { 
            vendor: ['jquery', 'lodash'],
        },
        output: { 
            path: __dirname + "/dll",
            filename: '[name].dll.js',
            library: '[name]_library'
        },
        plugins: [
            new webpack.DllPlugin({ 
                path: __dirname + "/dll/[name]-manifest.json",
                name: '[name]_library'
            })
        ]
    }

[20210610122053932.png_pic_center]: /images/20221005/f26037a126cf4644bda1b22960e546e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/9220d49c60944bd4987fda2a5f5f3471.png