npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-static-router

v1.1.8

Published

generat static html

Downloads

18

Readme

vue-static-router

主要说明 开发的时候采用vue-router方式开发,发布时根据配置文件可选择性的使用静态html文件方式访问,达到去#号的需求

Build Setup

# install dependencies

npm install static-router-vue --save #安装静态路由到项目中
npm install vue-static-router-generator --save #安装静态路由生成模块到项目中,可根据路径生成对应的静态HTML文件

#导出模块 vue-static-router

router.js修改地方 vue-router改成vue-static-router
   import Vue from 'vue'
   import Router from 'vue-static-router'
   import options from './config'
   export default new Router(options)


#导出模块  static-router-view

 app.vue 修改地方
    <router-view/> 替换成  <static-router-view/>

#导出模块  static-router-link

   <router-link/> 替换成  <static-router-link/>

   属性:
    @path   :  路由路径
    @params : 参数 json  开发环境使用vue-router方式,如果启用了isHtml会生成一个querystring()
    @isHtml : false 是否启用跳转静态文件方式,启用之后点击会跳转一个静态.html文件,需要路由配置文件中router/config.js 启用

#导出模块 static-router-params
   static-router-params

   暂时未实现,预先目标是获取路由




#导出模块 vue-static-router-generator
 webpack.prod.conf.js 修改
  添加 
    const VueStaticRouterPlugin=require('vue-static-router-generator');//文件头部

     new VueStaticRouterPlugin({
         plugins: webpackConfig.plugins,
         routers: [
         { path: "index" }, //生成index.html
         { path: 'details' }],//生成details.html
         commonOptions: {}
      });  //文件结尾

 或者添加

       new VueStaticRouterPlugin({
  		plugins: webpackConfig.plugins,
  		routers: path.join(__dirname, '../src/router/config.js'),//路由的配置文件
 		 commonOptions: {}
		}); //文件结尾


 /*  参数说明
  @plugins 
   webpackConfig.plugins

  @routers = [ { path:'index',isHtml:true,template:"",script:""}]
    @routers 参数
    @path 生成文件名称 
    @isHtml:true ,默认为false, 是否由静态路由接管,如果没引用静态路由请忽略。
    @template :"" 文件名称,
    @script :" " 插入一段js代码,暂时不支持文件插入;

   @commonOptions ={}  HtmlWebpackPlugin默认参数配置

  */
  
#其他说明  

  git地址示例,因为电脑git环境有点问题,暂时未上传,如需要请联系。

  联系方式: [email protected]或者qq:243833804


##Keywords
   vue-router 静态化。