Node+Vue完美实现单页面

smallgoose 发布于2年前
0 条问题

利用node+express+ejs+mysql可以很简易的开发Web项目,如果项目中需要引入vue.js,有两种实现方式:一种是直接引入srcipt目录,一种是基于vue-cli脚手架独立运行。本文将基于第二种方式,实现一套完美的单页应用。

直接看代码-->GitHub

0、导言

我们知道,使用vue官方推荐的vue-cli脚手架很方便就可以创建一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。而我们这个项目是要将前端的入口当作一个index.ejs模板,所以只需要修改webpack的配置文件,将vue的生产环境构建目录修改为index.ejs路径即可。

1、node环境

首先,安装node,具体安装教程请参考http://nodejs.cn/
然后,我们构建node项目的目录文件:

运行node app打开http://localhost:8000/查看效果。

2、塔建Vue前端项目

首先参考Vue官网提供的vue-cli脚手架vue-cli命令行在目录front中生成我们的前端项项目。

运行npm run dev查看开发环境效果。

然后,找到文件front/config/index.js,修改build构建配置为:

module.exports = {
  build: {
    env: require('./prod.env'),
//  index: path.resolve(__dirname, '../dist/index.html'),
//  assetsRoot: path.resolve(__dirname, '../dist'),
//  assetsSubDirectory: 'static',
    index: path.resolve(__dirname, '../../views/index.ejs'),
    assetsRoot: path.resolve(__dirname, '../../public'),
    assetsSubDirectory: '',

这样,在你vue项目里面运行npm run build的时候,会把vue项目构建成一单页面,路径为views/index.ejs,同时将vue的static静态文件目录修改为node的public目录。

运行npm run bulid构建生产环境,返回node项目查看views的下index.ejs,你会发觉其代码都已经被修改了,并且public目录下多出了css和js文件,这些就是利用vue构建出来的生产环境代码。

具体查看源码

查看原文: Node+Vue完美实现单页面

  • Nevergive up
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。