vue-cli 打包出来的文件缺少_vue-cli2与vue-cli3打包至非根目录及element.ui字体图标丢失的问题...

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、打包后的文件存放目录：

打包后的文件存放目录