使用Express配置多个Vue项目

目前刚接触Express，有不对的地方请大家多多指教。下面直入主题。

我为什么要使用Express

因为项目中需要。项目属于地图类，包括上传数据、发布图层、发布服务等功能。其中上传数据后要做数据的编辑，可以参考mapbox二次开发。并且这个数据再次编辑功能，在其他项目中也可以使用。那么就可以配合express来食用。

以下仅记录流程：

创建Express

• 新建express-demo空文件夹，使用Express 应用程序生成器新建express项目（）

• npx express-generator

• npm install

• npm run start

• 打开http://localhost:3000/看到

Express
Welcome to Express

即为成功！

结构梳理：

访问http://localhost:3000/就是访问的routes/index.js中的

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render(                 ----1.
    'index',                  ----2.
    { title: 'Express' }      ----3.
  );
});

他返回了index页面，并且把title作为参数传出去。 打开views/index.jade，可以看到

extends layout

block content
  h1= title
  p Welcome to #{title}

其中title绑定的就是上面传过来的参数。在页面中进行绑定。 那么好奇海螺要问了，为什么----1.的时候会去找view里面寻找index，答案就在我们一直没提到的app.js中的4处。

··········

var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));         ------4.
app.set('view engine', 'jade');



app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public'))); ------5.


··········
module.exports = app;

同时我们还看到了

app.use(express.static(path.join(__dirname, 'public'))); ------5.

它定义我们的静态文件的路径。

创建Vue项目

• 新建vue-demo1空文件夹
• 使用vue-cli安装方式 vue create vue-demo1，尽量选择router（不选择History模式），后面可以测试路由。
• npm install
• npm run server 项目跑起来后，在根目录新建vue.config.js，设置打包路径为相对路径

module.exports = {
  publicPath: "./",
};

在项目可以跑成功的前提下

• npm run build

生成的dist文件夹稍后备用

Vue和Express结合

把vue-demo1项目生成的dist文件夹里面的内容，复制进Express项目的public/vue-demo1文件夹（需要新建），然后把index.html复制进views，改名vue-demo1.jade。

打开route/index.js 添加以下代码，代表访问http://localhost:3000/vue-demo1时返回我们打包好的vue项目入口文件index.html

router.get("/vue-demo1", function (req, res, next) {
  res.render("vue-demo1");
});

好，我们现在打开浏览器，访问http://localhost:3000/vue-demo1，就可以看到vue-demo1项目了。但是这只是一个Vue项目，我们可以依葫芦画瓢再次创建vue-demo2项目，大家可以自己探索探索。同时可以设置router为History模式试一试。