Vue項目webpack打包部署到服務器
阿新 • • 發佈:2018-05-23
rally assets .com pac build lean loader gin rect 目錄下的文件拷貝到Tomcat服務器下,會發現訪問到的是一個空白頁面,但是當我把它放在
Vue項目webpack打包部署到服務器
必須要配置的就是/config/index.js
在vue-cli webpack的模板下的/config/index.[js](http://lib.csdn.net/base/javascript "JavaScript知識庫")
,我們可以看到assetsPublicPath
這個鍵,並且這個東西還出現了兩次,我第一次打包的時候,只是修改了最下面的assetsPublicPath
,將它從‘/‘
變為了./
,然後我就執行了npm run build
,打包成功之後,可以看到項目中會多出來一個文件夾,就是dist
,裏面有一個static
文件夾和index.html
,然後我就將dist
..\webapps\ROOT
目錄下,它就可以訪問了
Tomcat下面的目錄結構:
但是這肯定是不行的,然後我就開始尋找答案,也根據別人的一些步驟做了下來,後來發現還是有一些問題的,沒有辦法訪問到主頁面,雖然吧,一直都沒成功,但是我也沒放棄,然後就綜合了一下問答裏面別人說的,進行了幾次嘗試,最後成功了。(給大家一個小建議:別放棄就好)。
下面的就是我的config/index.js
的配置:
// see http://vuejs-templates.github.io/webpack for documentation.
var path = 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-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
},
dev: {
env: require(‘./dev.env‘),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: ‘static‘,
assetsPublicPath: ‘./‘,
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// 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
}
}
可以發現,我就改了兩處,就是assetsPublicPath所對應的值,我這裏用的是./
,我也用webapps下的命的項目名試過,只是沒得到我想要的結果,後來我還是改成了./
使用vue-router的情況
當你在項目中使用vue-router
的時候,就需要給src/router/index.js
添點東西,如下面:
export default new Router({
mode : ‘history‘,
base: ‘/ttms/‘, //添加的地方
...
}
然後執行npm run dev
,將打包後的文件放在Tomcat的目錄下的WebApps下的ttms中,然後,就可以訪問到了:http://localhost:8080/ttms/
Vue項目webpack打包部署到服務器