VUE---vue部署到tomcat服务器
一.修改config-->index.js文件, 把build:{} 下的assetsPublicPath: '/',改成assetsPublicPath: './',---------解决首页加载空白问题build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/ind...
一.修改config-->index.js文件, 把build:{} 下的assetsPublicPath: '/',改成assetsPublicPath: './',---------解决首页加载空白问题
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// 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
}
二.如果需要在tomcat-->webapps目录下创建新的文件夹,需要把router-->index.js文件中添加base:'/文件夹名/'
Vue.use(Router)
/* 初始路由 */
const router = new Router({
base: '/myczsrgl/',
routes: [
{
path: '/login',
name: '登录',
component: Login
}
]
})
三.一般情况下会出现加载静态资源失败的情况,在build-->utils.js文件中添加一行代码---publicPath:'../../',
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath:'../../', //publicPath为打包后app.css至index.html的相对路径
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
四.如果在开发环境下添加了跨域接口调用或者代理的情况,则在生产环境也需要做相应的修改
config--->dev.env.js 添加开发环境中的: API_ROOT: '"/api"'
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ROOT: '"/api"' //添加API_ROOT
})
config--->prod.env.js 添加生产环境中的: API_ROOT: '"/api"'
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_ROOT: '"http://192.168.8.108:8088/MLFinanceManage"'
}
在axios调用创建时,添加代码 baseURL: process.env.API_ROOT,
//创建axios实例
var instance = axios.create({
baseURL: process.env.API_ROOT, //接口调用
timeout: 120000 ,//请求超过60秒即超时返回错误
// headers: { 'Content-Type': 'application/json;charset=UTF-8' }
headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //post提交数据
})
//用户登录
userLogin(data){
//就不需要像开发环境中的 'api/login/login' 这样调用了
return instance.post('/login/login', qs.stringify(data))
},
五.最后就是npm run build打包了,会生成一个dist目录,把这个文件夹拷贝到tomcat-->webapps目录下,并重命名为第二步中的(base:'/文件夹名/' ) 文件名,启动服务就可以访问了(类似http://192.168.8.108:8088/myczsrgl)
更多推荐
所有评论(0)