返回首页 | 注册送体验金88送现金

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

网站开发Vue项目webpack打包布置到服务器的实例详解

时间:2017-09-07 编辑:admin

Vue澳门巴黎人安全上网导航项目webpack打包布置到服务器

这篇博文首要说的就是我们今日遇到的问题,而且在经过我们的问询,许多人在打包布置的时分都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这儿以Tomcat为例。

必需要装备的就是/config/index.php

在vue-cli webpack的模板下的/config/index.php,我们们可以看到assetsPublicPath这个键,而且这个东西还呈现了两次,我们第一次打包的时分,仅仅修改了最下面的assetsPublicPath,将它从'/'变为了./,然后我们就履行了npm run build,打包成功之后,可以看到项目中会多出来一个文件夹,就是dist,里边有一个static文件夹和index.html,然后我们就将dist目录下的文件拷贝到Tomcat服务器下,会发现拜访到的是一个空白页面,可是当我们把它放在..\webapps\ROOT目录下,它就可以拜访了

Tomcat下面的目录结构:

可是这肯定是不可的,然后我们就开端寻觅答案,也依据他人的一些过程做了下来,后来发现仍是有一些问题的,没有办法拜访到主页面,尽管吧,一向都没成功,可是我们也没抛弃,然后就归纳了一下问答里边他人说的,进行了几回测验,最终成功了。。

下面的就是我们的config/index.php的装备:

// 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', ''],
 // 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/-loader#sourcemaps)
 // In our experience, they generally work a****pected,
 // just be aware of this issue when enabling this option.
 cssSourceMap: false

可以发现,我们就改了两处,就是assetsPublicPath所对应的值,我们这儿用的是./,我们也用webapps下的命的项目名试过,仅仅没得到我们想要的成果,后来我们仍是改成了./

运用vue-router的状况

当你在项目中运用vue-router的时分,就需要给src/router/index.php添点东西,如下面:

export default new Router({
 mode : 'history',
 base: '/ttms/', //增加的当地

然后履行npm run dev,将打包后的文件放在Tomcat的目录下的WebApps下的ttms中,然后,就可以拜访到了:http://localhost:8080/ttms/

以上就是关于Vue项目webpack打包布置到服务器的实例详解的材料,关于Vue的研制文章本站还许多,期望我查找参看,感谢阅览,期望能协助到我,谢谢我对本站的支撑!


浏览:

网站建设

流程

    网站建设流程