12. Vue搭建本地服務

一. 搭建本地伺服器

本地服務可以提高開發效率. webpack不需要每次都打包, 就可以看到修改後的效果. 本地伺服器基於node.js搭建, 內部使用二十express框架. 可以實現讓瀏覽器自動刷新的功能.

1. 安裝本地服務模組

npm install --save-dev webpack-dev-server@2.9.1
  • –save-dev: 本地服務只有在開發環境的時候才會使用, 所以, 我們以dev模式安裝, 打包的時候不會被打包
  • [email protected]: 這個版本是Vue2對應的版本. 

安裝的時候可能會報異常

 

 這個問題是因為我是mac本, 沒有安裝Xcode, 我們執行下面的命令安裝一下xcode的插件就可以了

  • 執行下面的命令, 輸入密碼
sudo rm -rf $(xcode-select -print-path)

  • 安裝Xcode插件

sudo xcode-select --install

 

然後在執行npm install –save-dev [email protected]就成功了.

2. 配置webpack.config.js

 devServer: {
        contentBase: "./dist",
        inline: true
}
  • contentBase: 為哪一個文件夾提供本地服務, 默認是根文件夾
  • port: 埠號
  • inline: 頁面實時刷新
  • historyApiFallback: 在SPA頁面中, 依賴HTML5的history模式

3. 配置package.json

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },

這句話的含義是, 將本地服務交由webpack來管理. 

4. 啟動本地服務

npm run dev

啟動成功!

 

 我們還可以啟動服務後直接打開瀏覽器

可以在命令行後面加一個–open

"dev": "webpack-dev-server --open"

 

二. 服務配置文件抽離

為了能夠更好的管理配置文件, 我們將配置文件進行分離.

抽離的原則是: 開發環境的配置放在一個文件, 需要打包到線上的配置放在一個文件, 這樣管理起來更清晰,更方便.

第一步: 創建一個目錄build, 然後在裡面創建三個文件

1. base.config.js

2. dev.config.js

3. prod.config.js

第二步: 把webpack.config.js中的內容

  • 公共的部分拷貝到base.config.js中. 
  • 開發環境的配置拷貝到dev.config.js中
  • 需要構建的部分拷貝到prod.config.js中

base.config.js

const path = require("path")
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const UglifyJsWebpackPlugin = require("uglifyjs-webpack-plugin")
module.exports={
    // 入口
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
        //publicPath:"dist/"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader' ]
            }, {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },{
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [ {
                    loader: 'url-loader',
                    options: {
                        // 當載入的圖片,  小於limit時, 會將圖片編譯成base64字元串形式. --- 不需要文件, 因為他是一個base64字元串
                        // 當載入的圖片, 大於limit是, 需要使用file-loader模組來載入. --- 當文件來處理, 就需要打包成文件, 需要file-loader
                        // 這是載入的文件目錄是根目錄, 結果找不到文件, 所以也不顯示, 我們可以在output位置增加publicPath:"dist/" 這樣, 所有的路徑類的都會加上這個路徑
                        limit: 13000,
                    }
                }]
            },{
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ]
    },
    resolve:{
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        // 增加版權資訊
        new webpack.BannerPlugin(`
            @author lxl
            @data 2021-03-03
            @desc *****
        `),
        // 打包index.html到dist中
        new HtmlWebpackPlugin({
            template: "index.html"
        }),
    ]
}

dev.config.js

module.exports={
    devServer: {
        contentBase: "./dist",
        inline: true
    }
}

prod.config.js

module.exports={
    plugins: [
        // 壓縮js文件--開發階段, 不要壓縮
        new UglifyJsWebpackPlugin()
    ]
}

 

第三步: 組合配置文件

現在原來的一個webpack.config.js配置文件變成了三個配置文件. 

開發環境使用: base.config.js 和 dev.config.js

線上環境使用: base.config.js 和 prod.config.js

那麼, 導入配的時候, 如何將其合併呢?

我們需要安裝一個插件webpack-merge. 這個插件可以幫助我們將兩個配置文件進行合併

npm install [email protected]

然後在dev.config.js和prod.config.js中引入base.config.js. 來看看引入後的文件

dev.config.js

const webpackMerge = require("webpack-merge")
const baseconfig = require("./base.config")
module.exports = webpackMerge(baseconfig, {
    devServer: {
        contentBase: "./dist",
        inline: true
    }
})

prod.config.js

const UglifyJsWebpackPlugin = require("uglifyjs-webpack-plugin")
const webpackMerge = require("webpack-merge")
const baseConfig = require("./base.config")
module.exports = webpackMerge(baseConfig, {
    plugins: [
        // 壓縮js文件--開發階段, 不要壓縮
        new UglifyJsWebpackPlugin()
    ]
})

在這裡引入了webpackMerge的包,然後使用webpackMerge(配置文件1, 配置文件2), 將兩個配置文件合併

第三步:然後修改輸出文件的路徑

因為我們的配置文件目錄修改了, 所以需要重新設置打包的輸出路徑

修改base.config.js

module.exports={
    // 入口
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
        //publicPath:"dist/"
    },
....
}

第四步: 在package.json中指定配置文件

默認讀取的配置文件是webpack.config.js, 現在我們定義了自己的配置文件, 所以, 需要指定讀取配置文件

修改package.json

{
  "name": "meet",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config './build/prod.config.js'",
    "dev": "webpack-dev-server --open --config './build/dev.config.js'"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^2.1.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "style-loader": "^2.0.0",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^2.3.0",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  "dependencies": {
    "vue": "^2.6.12"
  }
}

通過–config指定讀取的配置文件

 "build": "webpack --config './build/prod.config.js'",
 "dev": "webpack-dev-server --open --config './build/dev.config.js'"

第五步: 刪除webpack.config.js

 

第六步: 構建項目並運行

npm run build

然後運行項目

npm run dev

 

Tags:

VirMach 便宜 VPS

QNews

QNews