Vue本地开发环境配置和上线部署

开发环境只需要执行【npm run serve】即可启动服务。

如果需要跨域访问，可以通过配置vue.config.js的devServer解决。

该设置在正式环境是无效的。

1.  
   *
2.  
   * Vue-CLI项目的核心配置文件
3.  
   */
4.  
   const webpack = require('webpack')
5.  
   const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
6.  
    
7.  
   const path = require('path')
8.  
   const resolve = dir => {
9.  
   return path.join(__dirname, dir);
10.  
    };
11.  
     
12.  
    module.exports = {
13.  
    // vue cli3.3之后废除了baseUrl,在这之后需要使用 publicPath
14.  
    publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
15.  
    chainWebpack: config => {
16.  
    config.plugin('jquery').use(webpack.ProvidePlugin, [{
17.  
    $: 'jquery',
18.  
    jQuery: 'jquery',
19.  
    'window.jQuery': 'jquery'
20.  
    }])
21.  
    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [{}])
22.  
    },
23.  
    devServer: {
24.  
    before(app) {
25.  
    },
26.  
    open: true,
27.  
    https: false,
28.  
    // host: 'localhost',
29.  
    // port: 8081,
30.  
    proxy: {
31.  
    '/prms/api': {
32.  
    target: 'http://localhost:8082',
33.  
    changeOrigin: true,
34.  
    ws: true, // proxy websockets
35.  
    pathRewrite: {
36.  
    '^/api': '/api'
37.  
    }
38.  
    }
39.  
    }
40.  
    }
41.  
    }

如果想打包发布，步骤如下：

1、执行 npm run build，项目目录结构下会生成一个dist文件夹，dist就是项目编译产生的静态资源文件。

2、将dist文件夹copy到web服务器就可以访问，例如tomcat, IIS。

但是如果项目有后端服务，则存在跨域的可能，网络请求会出现404错误，原因是vue.config.js配置的devServer.proxy只在开发环境有效，

这时候可以通过nginx的反向代理实现请求转发。

nginx.conf配置如下

1.  
   server {
2.  
   listen 8080 // 端口号
3.  
   server_name ip // 项目 ip
4.  
    
5.  
   #charset koi8-r
6.  
    
7.  
   #access_log logs/host.access.log main
8.  
    
9.  
   location / {
10.  
    root E:/xxx/xxx/html/dist; // 项目资源文件路径
11.  
    index index.html index.htm;
12.  
    }
13.  
     
14.  
    # 代理配置
15.  
    location ~ /xxx/api/ {
16.  
    proxy_pass http://localhost:8081
17.  
    }
18.  
    }

window服务器的场合需要到任务管理器关闭nginx服务。

这篇好文章是转载于：学新通技术网