標(biāo)簽：vuetomcat服務(wù)器webpack打包部署
2017-06-05 22:01350人閱讀評(píng)論(0)收藏舉報(bào)
分類(lèi)：
版權(quán)聲明：Dear_Mr原創(chuàng)文章，轉(zhuǎn)載時(shí)需附上原文鏈接去扣，并給出相關(guān)說(shuō)明
Vue項(xiàng)目webpack打包部署到服務(wù)器
這篇博文主要說(shuō)的就是我今天遇到的問(wèn)題呛牲，而且在經(jīng)過(guò)我的詢問(wèn)缭保，好多人在打包部署的時(shí)候都遇到了一些問(wèn)題遥缕，下面就來(lái)說(shuō)下侥祭，如何將Vue項(xiàng)目放置在服務(wù)器上蓖宦，這里以Tomcat為例齐婴。
在vue-cli webpack的模板下的/config/index.js，我們可以看到assetsPublicPath這個(gè)鍵稠茂，并且這個(gè)東西還出現(xiàn)了兩次柠偶，我第一次打包的時(shí)候，只是修改了最下面的assetsPublicPath睬关，將它從'/'變?yōu)榱?/诱担，然后我就執(zhí)行了npm run build，打包成功之后电爹，可以看到項(xiàng)目中會(huì)多出來(lái)一個(gè)文件夾蔫仙，就是dist，里面有一個(gè)static文件夾和index.html丐箩，然后我就將dist目錄下的文件拷貝到Tomcat服務(wù)器下摇邦，會(huì)發(fā)現(xiàn)訪問(wèn)到的是一個(gè)空白頁(yè)面，但是當(dāng)我把它放在..\webapps\ROOT目錄下屎勘，它就可以訪問(wèn)了
Tomcat下面的目錄結(jié)構(gòu)：
但是這肯定是不行的施籍，然后我就開(kāi)始尋找答案，也根據(jù)別人的一些步驟做了下來(lái)概漱，后來(lái)發(fā)現(xiàn)還是有一些問(wèn)題的丑慎，沒(méi)有辦法訪問(wèn)到主頁(yè)面，雖然吧，一直都沒(méi)成功竿裂，但是我也沒(méi)放棄玉吁，然后就綜合了一下問(wèn)答里面別人說(shuō)的，進(jìn)行了幾次嘗試腻异，最后成功了诈茧。（給大家一個(gè)小建議：別放棄就好）。
下面的就是我的config/index.js的配置：
// see http://vuejs-templates.github.io/webpack for documentation.varpath =require('path')
module.exports = {
build: {
env:require('./prod.env'),
index: path.resolve(__dirname,'../dist/index.html'),
assetsRoot: path.resolve(__dirname,'../dist'),
assetsSubDirectory:'static',
assetsPublicPath:'./',
productionSourceMap:true,// 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-pluginproductionGzip: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 offbundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env:require('./dev.env'),
port:8080,
autoOpenBrowser:true,
assetsSubDirectory:'static',
assetsPublicPath:'./',
proxyTable: {},// CSS Sourcemaps off by default because relative paths are "buggy"http:// with this option, according to the CSS-Loader README// (https://github.com/webpack/css-loader#sourcemaps)// In our experience, they generally work as expected,// just be aware of this issue when enabling this option.cssSourceMap:false}
}
可以發(fā)現(xiàn)捂掰，我就改了兩處敢会，就是assetsPublicPath所對(duì)應(yīng)的值，我這里用的是./这嚣，我也用webapps下的命的項(xiàng)目名試過(guò)鸥昏，只是沒(méi)得到我想要的結(jié)果，后來(lái)我還是改成了./
當(dāng)你在項(xiàng)目中使用vue-router的時(shí)候姐帚，就需要給src/router/index.js添點(diǎn)東西吏垮，如下面：
exportdefaultnewRouter({
mode :'history',
base:'/ttms/',//添加的地方...
}
然后執(zhí)行npm run dev，將打包后的文件放在Tomcat的目錄下的WebApps下的ttms中罐旗，然后膳汪，就可以訪問(wèn)到了：
