vue webpack多頁配置

FrancisSoung 發(fā)布于2019-08-22 11:07 / 345人閱讀

摘要：用于添加到模版頁面，如下面的頁面模版正確輸出和的路徑配置生成的文件，定義路徑等模板路徑每個引用的模塊插入位置需要生成幾個文件，就配置幾個對象修改配置文件修改在中會引用，這里就是對應的根目錄，改成你想要輸出的地址就好了。

單頁配置相對于多頁簡單很多，這個是公司同事總結(jié)共享的多頁配置

vue-cli-multipage

首先安裝vue-cli

npm install  vue-cli -g

vue init webpack my-project

cd my-project

npm install

下面是vue-cli的配置目錄

/build
    build.js               #構(gòu)建生產(chǎn)代碼
    dev-client.js 
    dev-server.js          #執(zhí)行本地服務器
    utils.js               #額外的通用方法
    webpack.base.conf.js   #默認的webpack配置
    webpack.dev.conf.js    #本地開發(fā)的webpack配置
    webpack.prod.conf.js   #構(gòu)建生產(chǎn)的webpack配置
/config   配置文件
    dev.env.js
    index.js
    pord.env.js
    test.env.js
/src
    assets                  #放資源
    components              #組件
    /module                 #頁面模塊
        /home               #子頁面
            index.html      #模版頁面
            index.js        #js入口

修改build.js

注釋掉其中的兩句，因為這里不需要刪除所有的文件

var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
// rm("-rf", assetsPath)  // 這里是移除根目錄
// mkdir("-p", assetsPath) // 新建根目錄
cp("-R", "static/*", assetsPath)  // 復制資源

修改默認的webpack配置webpack.base.conf.js

生成需要的入口文件

var glob = require("glob")
var entries = getEntry("./src/module/**/*.js") // 獲得入口js文件
function getEntry(globPath) {
  var entries = {},
    basename, tmp, pathname;

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry));
    tmp = entry.split("/").splice(-3);
    pathname = tmp.splice(1, 1) + "/" + basename; // 正確輸出js和html的路徑
    entries[pathname] = entry;
  });
  return entries;
}

module.exports = {
  entry: entries,
  ...

修改本地開發(fā)的webpack配置webpack.dev.conf.js

這里是和本地服務器有關(guān)的配置

這里是根據(jù)目錄生成對應的頁面

var path = require("path")
var glob = require("glob")
var pages = getEntry("./src/module/**/*.html")

function getEntry(globPath) {
  var entries = {},
    basename, tmp, pathname

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry))
    tmp = entry.split("/").splice(-3)
    pathname = tmp.splice(1, 1) + "/"  + basename // 正確輸出js和html的路徑
    entries[pathname] = entry
  })
  return entries
}

for (var pathname in pages) {
  // 配置生成的html文件，定義路徑等
  var conf = {
    filename: pathname + ".html",
    template: pages[pathname], // 模板路徑
    chunks: [pathname, "vendor", "manifest"], // 每個html引用的js模塊
    inject: true              // js插入位置
  }
  // 需要生成幾個html文件，就配置幾個HtmlWebpackPlugin對象
  module.exports.plugins.push(new HtmlWebpackPlugin(conf))
}

修改構(gòu)建生產(chǎn)的webpack配置webpack.prod.conf.js

這里是最后打包的配置

1.首先根據(jù)目錄生成頁面，這里都用到webpack的HtmlWebpackPlugin插件
2.配置里面可以自定義屬性。用于添加到模版頁面，如下面的setPath

頁面模版
<%= htmlWebpackPlugin.options.setPath %>




    
    <%= htmlWebpackPlugin.options.title %>

var glob = require("glob")

function getEntry(globPath) {
  var entries = [],
    basename, tmp, pathname

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry))
    tmp = entry.split("/").splice(-3)
    pathname = tmp.splice(1, 1) + "/" + basename // 正確輸出js和html的路徑
    entries[pathname] = entry
  })
  return entries
}

var pages = getEntry("./src/module/**/*.html")

for (var pathname in pages) {
  // 配置生成的html文件，定義路徑等
  var conf = {
    setPath: "config->item("domain_static"); ?>",
    getPath: "",
    oData: "",
    filename: pathname + ".php",
    template: pages[pathname], // 模板路徑
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
      // more options:
      // https://github.com/kangax/html-minifier#options-quick-reference
    },
    chunksSortMode: "dependency",
    chunks: [pathname, "vendor", "manifest"], // 每個html引用的js模塊
    inject: true              // js插入位置
  }
  // 需要生成幾個html文件，就配置幾個HtmlWebpackPlugin對象
  webpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
}

module.exports = webpackConfig

修改配置文件config

修改config/index.js

在build.js中會引用assetsRoot，這里就是對應的根目錄，改成你想要輸出的地址就好了。ps：這里是相對地址

assetsPublicPath會被引用插入到頁面的模版中，這個是你資源的根目錄

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require("path")

module.exports = {
  build: {
    env: require("./prod.env"),
    index: path.resolve(__dirname, "../dist/index.html"),
    assetsRoot: path.resolve(__dirname, "../dist"),
    assetsSubDirectory: "",
    assetsPublicPath: "/dist/",
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ["js", "css"]
  },
  dev: {
    env: require("./dev.env"),
    port: 8080,
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }
}

復制資源文件到后臺設(shè)置的相應目錄創(chuàng)建cp.js

require("./check-versions")()
require("shelljs/global")
env.NODE_ENV = "production"

var path = require("path")
var ora = require("ora")

var jsDist = path.resolve(__dirname, "../dist/js")
var cssDist = path.resolve(__dirname, "../dist/css")
var webDist = path.resolve(__dirname, "../dist/web")
var mobileDist = path.resolve(__dirname, "../dist/mobile")


var pubPath = path.resolve(__dirname, "../../public/dist")
var webview = path.resolve(__dirname, "../../web/views/")

rm("-rf", pubPath)
mkdir("-p", pubPath)
cp("-R", jsDist, pubPath)
cp("-R", cssDist, pubPath)
cp("-R", webDist, webview)
cp("-R", mobileDist, webview)

修改package.json

{
  "name": "y",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "lujs",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js", //執(zhí)行相應的npm run命令
    "build": "node build/build.js",
    "cp": "node build/cp.js"
  },
  "dependencies": {
    "vue": "^2.1.0"
  },
  "devDependencies": { //在項目根目錄執(zhí)行npm install會下載相關(guān)的依賴
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-component": "^0.6.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.25.0",
    "element-ui": "^1.0.4",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.17.2",
    "json-loader": "^0.5.4",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.4",
    "url-loader": "^0.5.7",
    "vue-loader": "^10.0.0",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.0",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  }
}

其他 使用淘寶鏡像

https://npm.taobao.org/ 使用淘寶鏡像

$ npm install -g cnpm --registry=https://registry.npm.taobao.org  使用cpm代替默認的npm

切換node版本

https://github.com/alsotang/n... 使用nvm管理node

1.安裝nvm

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.2/install.sh | bash
$ nvm  有內(nèi)容輸出則說明安裝成功了

2.安裝node

$ nvm install 0.12 后面指定要安裝的node版本
$ nvm ls 查看安裝的所有node版本，那個綠色小箭頭的意思就是現(xiàn)在正在使用的版本

3.切換node版本

nvm use 0.12 后面指定你要使用的node版本
node -v 查看當前node版本

4.完善安裝

檢查 ~/.profile 或者 ~/.bash_profile 中有沒有這樣兩句

export NVM_DIR="/Users/YOURUSERNAME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm

這兩句會在bash啟動的時候被調(diào)用，然后注冊nvm命令

調(diào)用

$ nvm ls

有default的指向，沒有就執(zhí)行

$ nvm alias default 0.12

再

$ nvm ls

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/91802.html

發(fā)表評論

登陸后可評論

0條評論

FrancisSoung

男|高級講師

我要關(guān)注我要私信

TA的文章

flex布局入門

閱讀 3077·2019-08-30 15:56
CSS查漏補缺

閱讀 1234·2019-08-29 15:20
阿里云前端周刊 - 第 23 期

閱讀 1571·2019-08-29 13:19
一套Vue的單頁模板：N3-admin

閱讀 1473·2019-08-29 13:10
受控組件和非受控組件，強力一波

閱讀 3381·2019-08-26 18:27
iphonex適配

閱讀 3069·2019-08-26 11:46
JavaScript面向?qū)ο?/a>

閱讀 2234·2019-08-26 11:45

codereview 思考和前端規(guī)范_023

閱讀 3753·2019-08-26 10:12

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

vue webpack多頁配置

相關(guān)文章

webpack4+vue2+axios+vue-router的多頁+單頁混合應用框架

WebPack在多頁應用項目中的探索

**傳統(tǒng)多頁應用的webpack配置**

**記一次基于vue的spa多頁簽實踐經(jīng)驗**

**記一次基于vue的spa多頁簽實踐經(jīng)驗**

發(fā)表評論

0條評論

FrancisSoung

男|高級講師

TA的文章

flex布局入門

CSS查漏補缺

阿里云前端周刊 - 第 23 期

一套Vue的單頁模板：N3-admin

受控組件和非受控組件，強力一波

iphonex適配

JavaScript面向?qū)ο?/a>

codereview 思考和前端規(guī)范_023

最新活動