针对 vue
应用部署后静态文件加载 404 的情况,以下是解决方法的完整攻略。
现象
应用部署后,访问应用的静态文件(如 CSS、JS、图片等)时会出现 404 错误。
原因
原因通常是因为静态资源文件的路径找不到或者没有正确引入。
解决方案
解决该问题,可以采用以下两种方案:
方案一:history 模式
在 Vue Router 中,mode
可以设置为 history
模式来解决静态资源路径问题。在这种模式下,应用的地址会表现为正常的 URL 地址,比如 /about
或 /contact
等。而不使用该模式则 URL 地址会像这样:/#/about
或 /#!about
。
- 配置 Vue Router
在 router/index.js
中添加如下代码:
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld.vue';
import About from '@/components/About.vue';
import Contact from '@/components/Contact.vue';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
},
{
path: '/about',
name: 'About',
component: About,
},
{
path: '/contact',
name: 'Contact',
component: Contact,
},
],
});
- 在服务器中配置
在服务器端需要配置一下,如果是 nginx
则需要在/nginx/conf/nginx.conf 中添加以下代码:
location / {
try_files $uri $uri/ /index.html;
}
这里的 try_files
就是尝试访问指定的文件,如果找不到则直接返回 index.html
页面。这避免了 URL 访问时出现 404 错误的情况。
方案二:publicPath
在打包时,可以通过设置 publicPath
来解决静态文件路径的问题。该方法适用于那些不支持 history
模式的服务器或者是处理静态资源的CDN服务器。
在 vue.config.js 中添加以下代码:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/my-app/'
: '/',
};
这里的 publicPath
就是指定资源文件的基础路径,如上面的 /my-app/
就是一个网站或者 CDN 路径的基础路径,这个路径就是所有文件路径的前缀。
以上就是 vue
部署后静态文件加载 404 错误的两种解决方案。
示例说明
示例一
该示例是基于 publicPath
方案的,有以下的目录结构:
my-app/
node_modules/
src/
assets/
logo.png
public/
index.html
favicon.ico
在 vue.config.js 中添加以下代码:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/my-app/'
: '/',
};
在 index.html 中的 img 标签里设置相对路径:
<img src="./assets/logo.png" alt="logo">
这里的 publicPath
为开发环境下的根路径 /
,而在生产环境下的 publicPath
为 /my-app/
,这样就能够正常的加载到静态资源文件了。
示例二
该示例是基于 history
模式的,基本 publicPath
的解决方案一样,只是在路由模式上有所不同。
路由添加方式:
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
component: Home,
},
{
path: '/about',
component: About,
},
],
});
服务器配置(nginx):
location / {
try_files $uri $uri/ /index.html;
}
以上是两个示例分别使用不同的方案解决 vue
部署后静态文件加载 404 的问题。