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 静态化。