Vue Cli项目生产环境编译

在完成网页的开发之后，要将项目放入生产环境中

需要将开发完的项目做以下处理

1，在项目新建环境变量文件 env.development

 

 

 文件中加入环境变量

VUE_APP_API_URL=http://localhost:3000/admin/api  
//URL 以实际开发环境为准，实例为本地

2，添加环境变量 baseURL加入项目内:

将项目中的baseURL 用环境变量代替

const http = axios.create({
    baseURL:process.env.VUE_APP_API_URL || '/admin/api',
    //baseURL:'http://localhost:3000/admin/api'
})

3,在项目根目录新建vue cli配置文件 vue.config.js

module.exports = {
    outputDir:__dirname+'/../server/public/admin',//项目npm run build 导出静态文件的地址
    publicPath: process.env.NODE_ENV === 'production'//设置项目publicPath
      ? '/admin/'
      : '/'
  }

4.控制台执行npm run build

在node.js server中将项目文件目录加入到静态文件托管

app.use('/admin',express.static(__dirname+'/public/admin'))

便可以在生产环境中访问项目了

更多资料可以参考VUE CLI 配置参考 https://cli.vuejs.org/zh/config/#publicpath