vue webpack多頁(yè)配置

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

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

單頁(yè)配置相對(duì)于多頁(yè)簡(jiǎn)單很多，這個(gè)是公司同事總結(jié)共享的多頁(yè)配置

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í)行本地服務(wù)器
    utils.js               #額外的通用方法
    webpack.base.conf.js   #默認(rèn)的webpack配置
    webpack.dev.conf.js    #本地開(kāi)發(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                 #頁(yè)面模塊
        /home               #子頁(yè)面
            index.html      #模版頁(yè)面
            index.js        #js入口

修改build.js

注釋掉其中的兩句，因?yàn)檫@里不需要?jiǎng)h除所有的文件

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

修改默認(rèn)的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,
  ...

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

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

這里是根據(jù)目錄生成對(duì)應(yīng)的頁(yè)面

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"], // 每個(gè)html引用的js模塊
    inject: true              // js插入位置
  }
  // 需要生成幾個(gè)html文件，就配置幾個(gè)HtmlWebpackPlugin對(duì)象
  module.exports.plugins.push(new HtmlWebpackPlugin(conf))
}

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

這里是最后打包的配置

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

頁(yè)面模版
<%= 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"], // 每個(gè)html引用的js模塊
    inject: true              // js插入位置
  }
  // 需要生成幾個(gè)html文件，就配置幾個(gè)HtmlWebpackPlugin對(duì)象
  webpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
}

module.exports = webpackConfig

修改配置文件config

修改config/index.js

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

assetsPublicPath會(huì)被引用插入到頁(yè)面的模版中，這個(gè)是你資源的根目錄

// 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
  }
}

復(fù)制資源文件到后臺(tái)設(shè)置的相應(yīng)目錄創(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í)行相應(yīng)的npm run命令
    "build": "node build/build.js",
    "cp": "node build/cp.js"
  },
  "dependencies": {
    "vue": "^2.1.0"
  },
  "devDependencies": { //在項(xiàng)目根目錄執(zhí)行npm install會(huì)下載相關(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代替默認(rèn)的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)容輸出則說(shuō)明安裝成功了

2.安裝node

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

3.切換node版本

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

4.完善安裝

檢查 ~/.profile 或者 ~/.bash_profile 中有沒(méi)有這樣兩句

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

這兩句會(huì)在bash啟動(dòng)的時(shí)候被調(diào)用，然后注冊(cè)nvm命令

調(diào)用

$ nvm ls

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

$ nvm alias default 0.12

再

$ nvm ls

GPU云服務(wù)器云服務(wù)器 webpack cdn配置 webpack配置cdn webpack常用配置項(xiàng) 多頁(yè)

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

FrancisSoung

男|高級(jí)講師

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

TA的文章

flex布局入門

閱讀 3085·2019-08-30 15:56
CSS查漏補(bǔ)缺

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

閱讀 1577·2019-08-29 13:19
一套Vue的單頁(yè)模板：N3-admin

閱讀 1484·2019-08-29 13:10
受控組件和非受控組件，強(qiáng)力一波

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

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

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

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

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

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

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

vue webpack多頁(yè)配置

相關(guān)文章

webpack4+vue2+axios+vue-router的多頁(yè)+單頁(yè)混合應(yīng)用框架

WebPack在多頁(yè)應(yīng)用項(xiàng)目中的探索

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

**記一次基于vue的spa多頁(yè)簽實(shí)踐經(jīng)驗(yàn)**

**記一次基于vue的spa多頁(yè)簽實(shí)踐經(jīng)驗(yàn)**

發(fā)表評(píng)論

0條評(píng)論

FrancisSoung

男|高級(jí)講師

TA的文章

flex布局入門

CSS查漏補(bǔ)缺

阿里云前端周刊 - 第 23 期

一套Vue的單頁(yè)模板：N3-admin

受控組件和非受控組件，強(qiáng)力一波

iphonex適配

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

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

最新活動(dòng)