nginx代理,vue打包注意事项

2018-02-24 10:19:33来源:oschina作者:梁语风人点击

分享
nginx代理前端服务器服务器

域名如:


server {
listen80;
server_namexxx.liangyufeng.com;
root /data/client/aaa;
index index.php index.html index.htm;

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


域名设置如下的,前端打包后的文件不在域名的根目录下时(例如在bbbbbb下时)


server {
listen80;
server_namexxx.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'
},

打包后的文件路径都变成了相对路径
输入图片说明

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台