vue打包静态资源后显示空白及static文件路径报错的解决

如何解决vue打包静态资源后显示空白及static文件路径报错问题？

在vue项目中，打包后出现空白或者找不到static文件的问题相信大家都遇到过。下面我来详细讲解如何解决这个问题。

解决过程：

一、修改Vue项目的config/index.js文件

config/index.js文件主要包含了一些项目的基本配置，如开发和生产环境的配置等。我们需要修改生产环境下的一些配置，主要包括assetsPublicPath和assetsSubDirectory。

首先，我们需要在该文件中找到如下代码:

    build: {

        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),

        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',

    .........

1. 修改assetsPublicPath

assetsPublicPath是指静态资源的公共路径，它应该和你的主页文件在同一级目录。而./是指当前目录，这就可能导致在不同的目录下无法使用相同的静态资源。所以我们需要将其修改为./，如下：

将

    assetsPublicPath: './',

改为

    assetsPublicPath: '/',

1. 修改assetsSubDirectory

assetsSubDirectory是指存放生成的静态资源（js、css、img等）的目录。很多开发者使用的是/static，但是这会导致可以在本地使用但是在服务器（比如nginx）上无法正确请求。所以我们需要将其改为‘./static’，这样在不同目录服务器环境下都可以正常调用静态资源了，如下：

将

    assetsSubDirectory: 'static',

改为

    assetsSubDirectory: './static',

二、修改webpack.base.conf.js

在在build文件夹下找到webpack.base.conf.js文件,在module.exports下面添加:

    module: {
        rules: [
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
            }
        ]
    },

三、打包

重启项目，执行npm run build 进行项目打包。

至此，我们已经完成了vue打包静态资源后显示空白及static文件路径报错问题的完整解决。

示例一：

如果打包后发现静态资源没有被引入，可以通过打开控制台查看network选项卡,或者通过webpack-bundle-analyzer插件分析打包后的代码 bundle visualizer（需要全局安装webpack-bundle-analyzer插件）。如果资源被引入了，查看路径是否正确，主要需要确认assetsPublicPath和assetsSubDirectory设置是否正确。

示例二：

如果打包后，访问页面为空白或报错说找不到资源的话，可以在打开控制台，看看console有没有报错，如果报错的话，可以看看路径是不是设置正确的。