运行 npm run build以后, 打包出来的文件不生效.

alienshengzi commented 7 years ago

运行 npm run build之后,将 index_prod.html 和 dist目录拷贝至服务器静态文件夹下,访问 index_prod.html无效.显示空白的页面.

DevilTears commented 7 years ago

同求

Yougoss commented 7 years ago

可以查看页面的network看加载静态文件的路径是否正确，可以在webpack的config文件中修改build时加载文件的路径

ketuzhong commented 7 years ago

同问静态文件的路径是正确的，资源也都加载出来了，就是在loading之后，页面一片空白。

flybbjcs70 commented 7 years ago

改成index.html

starmarker commented 7 years ago

同样……改成index后依然无效，loading后空白

starmarker commented 7 years ago

我也遇到同样的问题，折腾了两天，然后终于在4月29日晚上21:30解决掉了。这个问题大部分都是因为目录的原因，用dev的时候，都是在根目录，但是部署到实际的项目中，很有可能是个子目录，比如，我自己的项目，地址是127.0.0.1:8020/test/。然后这几天都没有搞定这个问题。今天我是这样的解决的。首先，必须是产品模式的页面才能够使用其他的静态页面的服务器来访问，开发模式貌似天生就不行。第一步：配置src/main.js路由： `const RouterConfig = {

mode: 'history',

routes: Routers,

base:'/test/'

};` 把产品模式的路由配置一个，然后发现dev下也可以用这个路径访问了。很多同学改到这里以为，把index_prod.html页面上的main.css，vendor.js，main.js这些改一下就大功告成，然而并没有。因为你改了这几个文件的路径之后，页面依然会报错，会有几个chunk报错

还要改一个东西…… webpack.prod.config.js里面 `module.exports = merge(webpackBaseConfig, {

output: {

    publicPath: '/test/dist/',

    filename: '[name].[hash].js',

    chunkFilename: '[name].[hash].chunk.js'

},`

大约在第15行 publicPath属性，配置好路径，毕竟要部署到服务器，根目录什么的应该已经确定了，使用了history模式的路由的话，资源使用相对路径多半要出错。

不知道能不能解决你的问题，不过我自己解决了我这边的问题！

最后特意提醒一句，楼上的兄弟说的index_prod.html名字还真要改。哈哈哈哈…… 否则，极有可能还是空的，因为没有匹配上路由。当然，幸亏俺最开始测试了时候就搞了一个错误页面，匹配不到的路由都跳转到错误页。否则一直空白下去我估计我早就选择狗带了！

18267372741 commented 7 years ago

正斜杠为什么会变成反斜杠

benfeng commented 7 years ago

build之后不能访问是因为路由模式问题，项目build后我是要单独使用的，默认是history模式，一打开就是空白，要设为hash模式，又不写说明 const RouterConfig = { mode: 'hash', routes: Routers };

76765357 commented 7 years ago

我木有根目录的问题，index_prod.html改成index.html就好了，真坑啊

hexuebing commented 6 years ago

这是默认路由生效导致的，请修改router.js文件

const routers = [
    {
        path: '/index_prod.html',
        meta: {
            title: ''
        },
        component: (resolve) => require(['./views/index.vue'], resolve)
    }
];

CRONWMMM commented 6 years ago

这个不是iview的问题，就算是用vue-cli构建也同样有这个问题。应该是vue 的一个小坑，但是官网上也没有相关说明

helixcg commented 6 years ago

https://www.cnblogs.com/qiu-Ann/p/7477593.html 到项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”

dudugou commented 6 years ago

这种级别的问题，留着不修改，让这么多人一人掉一次坑吗？

aichenxinyu commented 6 years ago

需要配置静态服务： npm install -g serve serve -s build // 默认端口5000 服务链接：http://localhost:5000 该链接会指向打包生成的index.html页面参考create-react-app 的官方说明：https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment

duoduodady commented 5 years ago

看了前面的一堆帖子，实际操作了一下，最后顺利的部署到子目录下了，详细记录一下过程。 1、修改根目录下的main.js文件把原来的history模式改成了hash了，同时增加了一个base父目录配置。我要把编译后的结果，拷贝到IView3目录下面去，访问的时候，也是通过http://localhost:103/IView3/index.html 来访问，所以这里把base配置为"/IView3/" 2、修改根目录下的webpack.prod.config.js 文件把publicPath修改一下，修改为'/IView3/dist/'

最下面还有一个HtmlWebpackPlugin的配置也要修改一下：直接把原来的index_prod.html修改为index.html。

3、然后就编译发布吧。 npm run build

4、把生成的dist目录还有index.html拷贝到我的IView3目录下面去。现在通过浏览器访问吧。 http://localhost:103/IView3/index.html

iview / iview-project

运行 npm run build以后, 打包出来的文件不生效. #13