采用了Vue-cli的方式。
1、反向代理
devServer: { host: '127.0.0.1', port: 9000, proxy: { '/gonghui/': { target: 'http://127.0.0.1', secure: false, changeOrigin: true, pathRewrite: { '^/gonghui': 'gonghui' } } }, historyApiFallback: { index: url.parse(options.dev ? '/assets/' : publicPath).pathname } },
2、main.js
import Vue from 'vue' import App from './App' import router from './router' /* * iview的全局引入 */ import iView from 'iview'; import 'iview/dist/styles/iview.css'; Vue.use(iView); import axios from 'axios' /* * axios的引入 */ Vue.prototype.axios=axios; import './style/index.scss'; Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
3、入口增加了
entry: {
app: ['babel-polyfill','./src/main.js']
},
4、vue-cli 打包压缩(npm run build)文件后,默认根目录修改,解决前后端代码结合的路径问题。
将config/index.js文件中的assetsPublicPath 值修改为你需要的根目录,原来默认是‘/’,下图中加上了"elkdashboard/",“elkdashboard”是本项目的项目名,用tomcat起的服务URL默认根目录会加上“/项目名/”。这样将打包好的代码放到项目的webapp目录下就不会出现根目录不统一的情况了,改成'./'就成相对路径了
5、Iview字体图标 css文件引用的字体图标路径打包之后找不到
在vue-cli项目中build/utils.js中找到如下代码块,添加
publicPath:’../../’
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:'../../' //添加这句话
})
} else {
return ['vue-style-loader'].concat(loaders)
}
vue会用loader将项目中的各种本地URL转换
build后F12查看network,发现资源404,并且去查找的路径是
/dist/static/css/static/img/boston.0d72519.jpg
显然,css中引用的图片地址有问题,需要返回上两级目录。
CSS中引用的字体文件,图片文件路径错误的问题都解决了。