nginx代理，vue打包注意事项

nginx代理前端服务器服务器

域名如：

server {
		listen       80;
		server_name  xxx.liangyufeng.com;
		root /data/client/aaa; 
		index index.php index.html index.htm;

前端打包后放在/data/client/aaa目录下面，直接可以运行

域名设置如下的，前端打包后的文件不在域名的根目录下时（例如在bbbbbb下时）

server {
		listen       80;
		server_name  xxx.liangyufeng.com;
		location /bbbbbb {
			root /data/client/aaa;
			try_files $uri $uri/ /bbbbbb/index.html;
			index index.html index.htm;
		}

标准的vue官方生成的webpack工程

前端的代码也要相应的更改路径才行

const router = new Router({
	base: '/bbbbbb/',

打包的资源路径也要相应的修改

var path = require('path')

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/bbbbbb/',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },

打包后的文件引用路径 需要在vue的路由里面添加对应的路径才行 这个时候打包好的前端文件要放在/data/client/aaa/bbbbbb下才能正常展示

iview-admin工程配置为

router中配置

import Vue from 'vue';
import iView from 'iview';
import Util from '../libs/util';
import VueRouter from 'vue-router';
import Cookies from 'js-cookie';
import {routers, otherRouter, appRouter} from './router';

Vue.use(VueRouter);

// 路由配置
const RouterConfig = {
    base:'/bbbbbb/',
    mode: 'history',
    routes: routers
};

webpack.prod.config.js中配置

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
const fs = require('fs');
const path = require('path');
const package = require('../package.json');

fs.open('./build/env.js', 'w', function(err, fd) {
    const buf = 'export default "production";';
    fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});
});

module.exports = merge(webpackBaseConfig, {
    output: {
        publicPath: '/bbbbbb/dist/',  // 修改 https://iv...admin 这部分为你的服务器域名
        filename: '[name].[hash].js',
        chunkFilename: '[name].[hash].chunk.js'
    },

打包后的文件路径都变成了相对路径