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'
},
打包后的文件路径都变成了相对路径