vue webpack多页配置

摘要：用于添加到模版页面，如下面的页面模版正确输出和的路径配置生成的文件，定义路径等模板路径每个引用的模块插入位置需要生成几个文件，就配置几个对象修改配置文件修改在中会引用，这里就是对应的根目录，改成你想要输出的地址就好了。

单页配置相对于多页简单很多，这个是公司同事总结共享的多页配置

首先安装vue-cli

npm install  vue-cli -g

vue init webpack my-project

cd my-project

npm install

下面是vue-cli的配置目录

/build
    build.js               #构建生产代码
    dev-client.js 
    dev-server.js          #执行本地服务器
    utils.js               #额外的通用方法
    webpack.base.conf.js   #默认的webpack配置
    webpack.dev.conf.js    #本地开发的webpack配置
    webpack.prod.conf.js   #构建生产的webpack配置
/config   配置文件
    dev.env.js
    index.js
    pord.env.js
    test.env.js
/src
    assets                  #放资源
    components              #组件
    /module                 #页面模块
        /home               #子页面
            index.html      #模版页面
            index.js        #js入口
        

注释掉其中的两句，因为这里不需要删除所有的文件

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

生成需要的入口文件

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,
  ...

这里是和本地服务器有关的配置

这里是根据目录生成对应的页面

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

这里是最后打包的配置

1.首先根据目录生成页面，这里都用到webpack的HtmlWebpackPlugin插件
2.配置里面可以自定义属性。用于添加到模版页面，如下面的setPath

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




    
    



    
    

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

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)

{
  "name": "y",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "lujs",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js", //执行相应的npm run命令
    "build": "node build/build.js",
    "cp": "node build/cp.js"
  },
  "dependencies": {
    "vue": "^2.1.0"
  },
  "devDependencies": { //在项目根目录执行npm install会下载相关的依赖
    "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

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

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.2/install.sh | bash
$ nvm  有内容输出则说明安装成功了

$ nvm install 0.12 后面指定要安装的node版本
$ nvm ls 查看安装的所有node版本，那个绿色小箭头的意思就是现在正在使用的版本

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

检查 ~/.profile 或者 ~/.bash_profile 中有没有这样两句

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

这两句会在bash启动的时候被调用，然后注册nvm命令

调用

$ nvm ls

有default的指向，没有就执行

$ nvm alias default 0.12

再

$ nvm ls