devserver配置_vue的多页面配置

由于项目需求将vue改造成多页面，简单记录下改造的过程，以及如何使用。

如何使用项目

1. git clone
2. url克隆项目到本地
3. 在src/pages文件夹下，所有的页面都在pages下编写，新建一个目录(开发项目名称)demo，在demo中新建一个demo.js,demo.html,demo.vue,router/index.js这是一个单独文件的所有文件，每一个目录相当于一个项目需求，是一个单独分开的页面，例如demo和sign活动
4. 具体代码可参考文件中的sign和index目录。

项目改造过程

选型时考虑到多页面更合适目前项目，对新建项目进行改造，记录代码如下.

1. vue-cli webpack 项目名称(安装项目)
2. 修改文件build/utils.js，加入如下代码

// 多入口页面配置(读取pages下面文件夹下的js文件，js最好和目录文件名字一致)exports.entries = function () {  let entryFiles = glob.sync(PAGE_PATH+'/*/*.js') let map = {} entryFiles.map((filePath) => { let filename = filePath.substring(filePath.lastIndexOf('/')+1,filePath.lastIndexOf('.')) map[filename] = filePath }) return map} // 多页面输出配置，读取pages文件夹下对应的html文件，所以文件夹下的html文件最好也和文件目录名保持一致exports.htmlPlugin = function(){ let entryHtml = glob.sync(PAGE_PATH+'/*/*.html') let arr = [] entryHtml.map((filePath) => { let filename = filePath.substring(filePath.lastIndexOf('/')+1,filePath.lastIndexOf('.')) let conf = { template: filePath, // 模板来源 filename: filename+'.html', // 模板名称 chunks: ['manifest','vendor', filename], // 页面模板需要加对应的js，不加这一行每个页面都会引入所有的js inject: true } if(process.env.NODE_ENV == 'production'){ conf = merge(conf,{ minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' }) } arr.push(new HtmlWebpackPlugin(conf)) }) return arr}

1. 修改build/webpack.dev.conf.js和build/webpack.prod.conf.js

plugins: [//加上下面的一段代码].concat(utils.htmlPlugin())

1. 修改build/webpack.base.conf.js

entry: utils.entries(),

1. 这样修改配置就完成了，访问通过类似/sign.html/#/访问(hash路由)
2. 上面是使用hash路由方式访问地址，路由中有#号，在一些情况下是不太合适，例如，微信的分享中如果有#号，在分享的链接中在#号前面会加一些字符号，可能会影响页面的代码，这种情况下考虑使用路由的mode:'history'模式，这种情况下开发环境可以如下修改

devServer: { historyApiFallback: { rewrites: [ { from: //index/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, { from: //sign/, to: path.posix.join(config.dev.assetsPublicPath, 'sign.html') }, { from: //test/, to: path.posix.join(config.dev.assetsPublicPath, 'test.html') }, ], },, },

可以通过/sign,/test访问页面 7. 上面这种模式打包上线的时候需要后台的配置，(比如打包后的文件都在build文件夹下),nginx配置如下

server {

listen 3088;

server_name localhost;

#charset koi8-r;

#access_log /var/log/nginx/host.access.log main;

root /usr/share/nginx/html/build;

index index.html index.htm;

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html

#

error_page 500 502 503 504 /50x.html;

location = /50x.html {

root /usr/share/nginx/html;

}

location /sign {

try_files $uri $uri/ /sign.html;

}

location /test {

try_files $uri $uri/ /test.html;

}

}

上面的配置就能直接访问www.host:3388/sign,www.host:3388/test,这样整体的多页面配置就完成了。

通过node启动一个服务器来渲染多个html页面

直接在项目的目录下建立一个app.js安装相应的依赖，具体代码如下

const fs = require('fs')const Koa = require('koa')const route = require('koa-route')const path = require('path')const static = require('koa-static')const app = new Koa()const main = ctx => { console.log(ctx.request.url,'aa') // 匹配所有的请求返回对应的html let str = ctx.request.url.substring(1).split('/')[0] ctx.response.type = 'html' ctx.response.body = fs.createReadStream(path.join(__dirname, str + '.html'))}const toMain = ctx => { ctx.response.redirect('/')}// 静态资源设置const staticFile = static(path.join(__dirname, '/'))app.use(staticFile)app.use(route.get('/', toMain))app.use(route.get('/*', main))app.listen(9001)