vue cli 2.x、 3.x前端项目不再服务器根目录，显示空白页面的问题

出现的问题：

• 打包到服务器后，出现资源引用路径的问题
• 打包到服务器后，出现空白页的问题
• 打包到服务器后，出现引入的css的type被拦截转换为"text/plain"问题
• 打包到服务器后，出现路由刷新404的问题

vue cli 3.x

①、编译打包配置 ： publicPath属性是规定webpack打包项目后存放在服务器的路径

前端项目在服务器上的路径 比如：https://ssss.com/api/#/, 那么publicPath就写 ‘/api/’

文件路径：vue.config.js

const publicPath = {
	dev:'/',
	test:'/api/'
	pre:'/api/'
	prd:'/api/'
}[process.env.自定义区分当前环境的变量]
module.exports = {
	publicPath
	...
}

②、router配置–指定路由起始(在开发模式中，Vue项目被放在了webpack配合nodeJs生成的本地服务器的根目录，但是在真实服务器中，项目有可能不会放在根目录，所以要指定router的base)

前端项目在服务器上的路径 比如：https://ssss.com/api/#/, 那么base就写 ‘/api/’

与vue cli 2.x不同vue cli3.x中 process.env.BASE_URL 等于 vue.config.js中的publicPath属性（点击查看详细说明），所以可以设置vue router的base的值为 process.env.BASE_URL

文件路径：router/index.js

import Vue from 'vue'
import Router from 'router'
const router = new Router({
	mode:'history',
	base:process.env.BASE_URL, 
	routes:[
		{
			path:''
			naem:''
			component:''
		}
	]
})

vue cli 2.x

①、router配置–指定路由起始(在开发模式中，Vue项目被放在了webpack配合nodeJs生成的本地服务器的根目录，但是在真实服务器中，项目有可能不会放在根目录，所以要指定router的base)

前端项目在服务器上的路径 比如：https://ssss.com/api/#/, 那么base就写 ‘/api/’

文件路径：router/index.js

import Vue from 'vue'
import Router from 'router'
const router = new Router({
	mode:'history',
	base:'/api/', //前端项目在服务器上的路径 比如：https://ssss.com/api/#/,那么base就写'/api/'
	routes:[
		{
			path:''
			naem:''
			component:''
		}
	]
})

②、编译打包配置 ： publicPath属性是规定webpack打包项目后存放在服务器的路径

前端项目在服务器上的路径 比如：https://ssss.com/api/#/, 那么assetsPublicPath就写 ‘/api/’

文件路径：config/index.js

const path = require('path')
module.exports = {
	dev:{
		...
		assetsPublicPath:'/api/'//前端项目在服务器上的路径 比如：https://ssss.com/api/#/,那么assetsPublicPath就写'/api/'
		...
	}
	build:{
		...
		assetsPublicPath:'/api/'//前端项目在服务器上的路径 比如：https://ssss.com/api/#/,那么assetsPublicPath就写'/api/'
		...
	}
}

以防万一检查一下 webpack.base.config.js

看看 publicPath是下面这种情况吗？如果不是需要通过具体代码，判断 publicPath 的值是config.build.assetsPublicPath 还是 config.dev.assetsPublicPath ，再对config --> index.js文件的assetsPublicPath 的值进行修改

...
module.exports = {
	...
	output:{
		...
		publicPath: process.env.NODE_ENV === 'production' 
		? config.build.assetsPublicPath 
		: config.dev.assetsPublicPath
	}
}