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

資訊專欄INFORMATION COLUMN

vue-cli單頁應用改成多頁應用配置

legendmohe / 603人閱讀

摘要：地址前言從接觸開始用的是直接搭建單頁應用，參考配合著開發起來簡直爽到吊炸天，但是由于項目越來越復雜了，單頁用起來可能有點力不從心，能不能弄成多頁面呢，查了相關資料得到的結論是完全可以的，能多頁面多入口，并且可以使用組件，還引入，這簡

git地址

https://github.com/dawnyu/vue-cli-multipage.git

前言

從接觸vue開始用的是vue-cli直接搭建單頁應用，參考配合著vue-router開發起來簡直爽到吊炸天，但是由于項目越來越復雜了，單頁用起來可能有點力不從心，能不能弄成多頁面呢，查了相關資料得到的結論是完全可以的，能多頁面多入口，并且可以使用組件，還引入jQuery，這簡直完美了，這個demo是從我已經改造完成的項目中摘出來的，現在演示下怎么把基于vue2的vue-cli單頁模板改造成多頁面,并且多入口的項目。

技術棧

vue: 2.0.1

vue-resource：1.0.3

vue-router：2.0.0

webpack：1.13.2

gulp：3.9.1

ES6

運行 
git clone https://github.com/dawnyu/vue-cli-multipage.git
npm install 
npm run build
npm run dev
改造后的目錄


可以多目錄生成目標文件

公共的js和樣式圖標放到assets文件夾即可

修改點

build/utils.js

var path = require("path")
var config = require("../config")
var glob = require("glob")
  // 將樣式提取到多帶帶的css文件中，而不是打包到js文件或使用style標簽插入在head標簽中
var ExtractTextPlugin = require("extract-text-webpack-plugin")

exports.assetsPath = function(_path) {
  var assetsSubDirectory = process.env.NODE_ENV === "production" ?
    config.build.assetsSubDirectory :
    config.dev.assetsSubDirectory
  return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function(options) {
  options = options || {}
    // generate loader string to be used with extract text plugin
  function generateLoaders(loaders) {
    var sourceLoader = loaders.map(function(loader) {
      var extraParamChar
      if (/?/.test(loader)) {
        loader = loader.replace(/?/, "-loader?")
        extraParamChar = "&"
      } else {
        loader = loader + "-loader"
        extraParamChar = "?"
      }
      return loader + (options.sourceMap ? extraParamChar + "sourceMap" : "")
    }).join("!")

    if (options.extract) {
      return ExtractTextPlugin.extract("vue-style-loader", sourceLoader)
    } else {
      return ["vue-style-loader", sourceLoader].join("!")
    }
  }

  // http://vuejs.github.io/vue-loader/configurations/extract-css.html
  return {
    css: generateLoaders(["css"]),
    postcss: generateLoaders(["css"]),
    less: generateLoaders(["css", "less"]),
    sass: generateLoaders(["css", "sass?indentedSyntax"]),
    scss: generateLoaders(["css", "sass"]),
    stylus: generateLoaders(["css", "stylus"]),
    styl: generateLoaders(["css", "stylus"])
  }
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function(options) {
  var output = []
  var loaders = exports.cssLoaders(options)
  for (var extension in loaders) {
    var loader = loaders[extension]
    output.push({
      test: new RegExp("." + extension + "$"),
      loader: loader
    })
  }
  return output
}
//增加獲取多入口的方法 注意 這個參數是個數組
exports.getEntry = function(globPaths) {
  var entries = {},
    basename, tmp, pathname;
  for (globPath of globPaths) {
    glob.sync(globPath).forEach(function(entry) {
      basename = path.basename(entry, path.extname(entry));
      tmp = entry.split("/").splice(-3);
      pathname = tmp.splice(0, 1) + "/" + basename; // 正確輸出js和html的路徑
      entries[pathname] = entry;
    });
  }
  console.log(entries);
  return entries;
}

webpack.base.conf.js

var path = require("path")
var config = require("../config")
var webpack = require("webpack")
var merge = require("webpack-merge")
var utils = require("./utils")
var projectRoot = path.resolve(__dirname, "../") ///——driname當前目錄
var chunks = Object.keys(utils.getEntry(["./src/module/**/*.js", "./src/m/**/*.js"]));
// 將樣式提取到多帶帶的css文件中，而不是打包到js文件或使用style標簽插入在head標簽中
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  entry: utils.getEntry(["./src/module/**/*.js", "./src/m/**/*.js"]),//傳入需要打包的入口，我這里是pc端和手機端入口打到一個包里
  output: {
    path: config.build.assetsRoot,
    publicPath: process.env.NODE_ENV === "production" ? config.build.assetsPublicPath : config.dev.assetsPublicPath, //根名稱可配置
    filename: "[name].js"
  },
  resolve: {
    extensions: ["", ".js", ".vue"],
    fallback: [path.join(__dirname, "../node_modules")],
    alias: {
      "src": path.resolve(__dirname, "../src"),
      "assets": path.resolve(__dirname, "../src/assets"),
      "components": path.resolve(__dirname, "../src/components"),
      "jquery": "jquery"
    }
  },
  resolveLoader: {
    fallback: [path.join(__dirname, "../node_modules")]
  },
  module: {
    loaders: [{
        test: /.vue$/,
        loader: "vue-loader"
      },
      {
        test: /.js$/,
        loader: "babel",
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /.json$/,
        loader: "json"
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: "url",
        query: {
          limit: 30000,
          name: utils.assetsPath("img/[name].[hash:7].[ext]")
        }
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: "url",
        query: {
          limit: 10000,
          name: utils.assetsPath("fonts/[name].[hash:7].[ext]")
        }
      }
    ]
  },
  eslint: {
    formatter: require("eslint-friendly-formatter")
  },
  vue: {
    loaders: utils.cssLoaders(),
    postcss: [
      require("autoprefixer")({
        browsers: ["last 2 versions"]
      })
    ]
  },
  plugins: [
    // new webpack.optimize.CommonsChunkPlugin("static/build.js"),
    // 提取公共模塊
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendors", // 公共模塊的名稱
      chunks: chunks, // chunks是需要提取的模塊
      minChunks: chunks.length
    }),
    // 配置提取出的樣式文件
    new ExtractTextPlugin("css/[name].css"),
    //引入jqury
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],
}

webpack.dev.conf.js

var config = require("../config")
var webpack = require("webpack")
var merge = require("webpack-merge")
var utils = require("./utils")
var baseWebpackConfig = require("./webpack.base.conf")
var HtmlWebpackPlugin = require("html-webpack-plugin")
  // add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function(name) {
  baseWebpackConfig.entry[name] = ["./build/dev-client"].concat(baseWebpackConfig.entry[name])
})

module.exports = merge(baseWebpackConfig, {
  module: {
    loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  // eval-source-map is faster for development
  devtool: "#eval-source-map",
  plugins: [
    new webpack.DefinePlugin({
      "process.env": config.dev.env
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    // new HtmlWebpackPlugin({
    //   filename: "index.html",
    //   template: "index.html",
    //   inject: true
    // })
  ]
})

var pages = utils.getEntry(["./src/module/**/*.html", "./src/m/**/*.html"]);


for (var pathname in pages) {


  // 配置生成的html文件，定義路徑等
  var conf = {
    filename: pathname + ".html",
    template: pages[pathname], // 模板路徑
    favicon: "./src/assets/images/wechat.png",
    inject: true // js插入位置

  };


  if (pathname in module.exports.entry) {
    conf.chunks = ["vendors", pathname];
    conf.hash = true;
  }

  module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

webpack.prod.conf.js

var path = require("path")
var config = require("../config")
var utils = require("./utils")
var webpack = require("webpack")
var merge = require("webpack-merge")
var baseWebpackConfig = require("./webpack.base.conf")
var ExtractTextPlugin = require("extract-text-webpack-plugin")
var HtmlWebpackPlugin = require("html-webpack-plugin")
var env = process.env.NODE_ENV === "testing" ?
  require("../config/test.env") :
  config.build.env

module.exports = merge(baseWebpackConfig, {
  module: {
    loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
  },
  devtool: config.build.productionSourceMap ? "#source-map" : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath("js/[name].[chunkhash].js"),
    chunkFilename: utils.assetsPath("js/[id].[chunkhash].js")
  },
  vue: {
    loaders: utils.cssLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/workflow/production.html
    new webpack.DefinePlugin({
      "process.env": env
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_debugger: true,
        drop_console: true
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    // extract css into its own file
    new ExtractTextPlugin(utils.assetsPath("css/[name].[contenthash].css")),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    // new HtmlWebpackPlugin({
    //   filename: process.env.NODE_ENV === "testing" ?
    //     "index.html" : config.build.index,
    //   template: "index.html",
    //   favicon: "./src/assets/images/tjd.ico",
    //   inject: true,
    //   minify: {
    //     removeComments: true,
    //     collapseWhitespace: true,
    //     removeAttributeQuotes: true
    //       // more options:
    //       // https://github.com/kangax/html-minifier#options-quick-reference
    //   },
    //   // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    //   chunksSortMode: "dependency"
    // }),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: function(module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, "../node_modules")
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: "manifest",
      chunks: ["vendor"]
    })
  ]
})

if (config.build.productionGzip) {
  var CompressionWebpackPlugin = require("compression-webpack-plugin")

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: new RegExp(
        ".(" +
        config.build.productionGzipExtensions.join("|") +
        ")$"
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

var pages = utils.getEntry(["./src/module/**/*.html", "./src/m/**/*.html"]);

for (var pathname in pages) {


  // 配置生成的html文件，定義路徑等
  var conf = {
    filename: pathname + ".html",
    template: pages[pathname], // 模板路徑
    favicon: "./src/assets/images/wechat.png",
    inject: true // js插入位置

  };
  if (pathname in pages) {
    conf.chunks = ["vendors", pathname];
    conf.hash = true;
  }

  module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87132.html

相關文章

  • vue-cli單頁應用改成多頁應用配置

    摘要：地址前言從接觸開始用的是直接搭建單頁應用，參考配合著開發起來簡直爽到吊炸天，但是由于項目越來越復雜了，單頁用起來可能有點力不從心，能不能弄成多頁面呢，查了相關資料得到的結論是完全可以的，能多頁面多入口，并且可以使用組件，還引入，這簡 git地址 https://github.com/dawnyu/vue-cli-multipage.git 前言 從接觸vue開始用的是vue-cli直接...

    galaxy_robot 評論0 收藏0

  • vue-cli單頁應用改成多頁應用配置

    摘要：地址前言從接觸開始用的是直接搭建單頁應用，參考配合著開發起來簡直爽到吊炸天，但是由于項目越來越復雜了，單頁用起來可能有點力不從心，能不能弄成多頁面呢，查了相關資料得到的結論是完全可以的，能多頁面多入口，并且可以使用組件，還引入，這簡 git地址 https://github.com/dawnyu/vue-cli-multipage.git 前言 從接觸vue開始用的是vue-cli直接...

    Doyle 評論0 收藏0

  • VUE單頁應用首屏加載速度優化方案

    摘要：所以前端使用壓縮是沒有起作用的。影響，選項顯示警告在刪除沒有用到的代碼時不輸出警告刪除所有的語句還可以兼容瀏覽器內嵌定義了但是只用到一次的變量提取出出現多次但是沒有定義成變量去引用的靜態值此方法有待實踐，留待下次分享 單頁應用會隨著項目越大，導致首屏加載速度很慢?。。∫韵陆o出在下知道的幾種優化方案 使用CDN資源,減小服務器帶寬壓力 路由懶加載 將一些靜態js css放到其他地方（如...

    lewif 評論0 收藏0

  • VUE單頁應用首屏加載速度優化方案

    摘要：所以前端使用壓縮是沒有起作用的。影響，選項顯示警告在刪除沒有用到的代碼時不輸出警告刪除所有的語句還可以兼容瀏覽器內嵌定義了但是只用到一次的變量提取出出現多次但是沒有定義成變量去引用的靜態值此方法有待實踐，留待下次分享 單頁應用會隨著項目越大，導致首屏加載速度很慢?。?！以下給出在下知道的幾種優化方案 使用CDN資源,減小服務器帶寬壓力 路由懶加載 將一些靜態js css放到其他地方（如...

    jubincn 評論0 收藏0

發表評論

0條評論

legendmohe

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<