配置
此次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