vue-cli2与vue-cli3打包至非根目录及element

vue-cli2脚手架打包至线上非根目录需要的两步操作：

第一步：在router.js 中设置history模式，并设置base属性为’根目录‘名称

{
  mode: 'history',
  base: '/funds-management/',
  routes: [...]
}

第二步： 在项目目录下的config/index.js中设置assetsPublicPath为’./‘，代码如下：

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './', // 上线后非根目录配置，之前为 /

   // Source Maps 生产环境js.map文件
    productionSourceMap: false,
    devtool: '#source-map',
    // 生产环境开启Gzip压缩
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }

解决vue项目打包至线上后字体图标丢失的问题：

在项目目录下的build/utils.js中的其中一个函数新增一个字段：

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../' // 解决ele小图标出不来问题
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

至此vue-cli2的打包至非根目录操作完成。

============================华丽分割线==================================

vue-cli3脚手架打包至线上非根目录需要的两步操作：

1、前端需要做的配置：

在Vue.config.js配置文件中

// 在根目录的Vue.config.js中需要做如下配置：
module.exports = {
  baseUrl: '/education/',  // 基本路径
  productionSourceMap: false,  // 生产环境是否生成 sourceMap 文件
}

在route.js文件中配置：

export default new Router({
  mode: 'history',
  base: '/education/'    //配置base基础路径
})

2、后端Nginx需要做的配置：vim /etc/nginx/nginx.conf

 # 解决vue路由模式为history时刷新返回404的问题
        location / {
                root /usr/share/nginx/html;
                index /index.html;
                try_files $uri $uri/ /index.html;
        }
        # 配置以下这段即可，非根目录时也可以使vue的路由为history模式支持刷新
        location /education {
                #root /usr/share/nginx/html/education; // 配置了这段报500错误，原因不明
                #index /education/index.html; // 配置了这段报500错误，原因不明
                try_files $uri $uri/ /education/index.html;
        }

3、打包后的文件存放目录：

打包后的文件存放目录