记一次vue项目打包部署

配置

此次vue项目时利用vue-cli3构建的，所以并没有vue.config.js文件，我们在项目根目录下创建vue.config.js文件，文件如下

// vue.config.js
module.exports = {
    // 选项...
    publicPath:'/',            //部署应用包时的基本 URL
    outputDir:'dist',//生成的生产环境构建文件的目录
    assetsDir:'static', //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
    indexPath:'index.html', //指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
    devServer: {
        proxy: {
          '/api': {
            target: 'http://localhost:8081', //代理目标
            ws: true,
            changeOrigin: true,
            pathRewrite:{'^/api':''}  //重新url，比如http://localhost:8081/login 就是重写为api/login
          },
        }
      }
}

为了url看起来好看点，此次用的的路由模式是history

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

打包

npm run build

或者直接使用vue-cli的脚本

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
    },

},
打包成功后，会在项目的根目录下生成dist目录，dist目录下有index.html和static目录存放css，js，img等静态资源。

现在直接在浏览器打开index.html文件是空白的，而且还报错。

这需要开一个服务来加载这个项目，我选择nodejs，

然后在dist目录下新建一个web.js文件，文件内容如下

const express = require('express')
const app = express()
const fs = require('fs')

app.use('/static/', express.static('./static/'))
app.get("/*", function (req, res, next) {
  fs.readFile("index.html",'utf-8', function (err, data) {
    if (err) {
      next(err); // Pass errors to Express.
    }
    else {
      res.send(data);
    }
  });
});
app.use(function (err, req, res, next) {
    return	res.status(500).json({
		err_code: 500,
		message: err.message
	})
})


app.listen(80,()=>{
    console.log('App running at port 80 ...')
})

注意要先安装express 然后引入const express = require('express') 。记得开放static目录下的资源app.use('/static/', express.static('./static/'))。还有路由记得是app.get('/*'....,这样才会所有的url都引用了index.html

启动

前面的内容都搞好好，只要启动项目就好了，在dist目录下node web.js启动项目

记得在浏览器打开看看，是否成功。
如果没有意外的话，应该没问题的。
差点忘记了，还有很多服务器配置，请看Vue-Router