vue-cli 打包部署到子目录下,配置文件的更改

vue 打包后 静态文件路径不对的问题

之前做项目的时候,用 npm run build 打包部署后,访问页面发现背景图丢了,打开控制台后发现,静态资源等请求路径报404的错误,

从上图报错能够看到路径显示不对

后面百度发现,其实在我们准备打包项目之前,需要考虑的一个问题是:【我们的项目最终是要部署在根目录还是子目录】

路径查看后,发现我的项目是被部署在子目录下,所以用绝对路径,就会出现之前我的报错

如果你要在子目录部署的化,你的config/index.js配置中,需要将 assetsPublicPath:'/ '(绝对路径),更改为 './'(相对),下面上代码

build: {
		env: require('./prod.env'),
		index: path.resolve(__dirname, '../dist/index.html'),
		assetsRoot: path.resolve(__dirname, '../dist'),
		assetsSubDirectory: 'static',
		assetsPublicPath: './',  //./代表相对路径,/代表绝对路径,有些项目层级目录较多,可更改为../
		
	},

与此同时呢,由于我们在 css 中使用了相对路径来引入图片。那么,打包后,我们的 css 会抽离出来为一个单独的 css 文件,这个时候, css 和 图片 之间的一个相对路径关系就改变了。为了解决这个问题,我们需要在 build/utils.js 中,增加一个 pablicPath 的配置,下面上代码

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',//作用是设置打包过程中提取css的方法,更改注入路径
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

将配置文件中的这两处,更改完成后,再次进行打包,丢失的静态文件就回来了
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue CLI 4项目部署到服务器的其他目录下,可以按照以下步骤进行操作: 1. 首先,确保服务器已经安装了Node.js和npm。 2. 在本地开发环境中,使用Vue CLI 4创建一个新的Vue项目。可以通过在终端中运行以下命令来完成: ``` vue create my-project ``` 根据提示选择需要的特性和配置,创建一个新的Vue项目。 3. 进入项目目录: ``` cd my-project ``` 4. 在本地终端中,在my-project项目中运行以下命令进行构建: ``` npm run build ``` 这将生成一个dist目录,其中包含了构建后的所有静态文件。 5. 将dist目录中的所有文件上传到服务器的目标目录。 可以使用FTP工具,如FileZilla,将dist目录中的文件上传到服务器的目标目录中。 6. 在服务器中安装一个基本的HTTP服务器。 可以使用Nginx或Apache等HTTP服务器将静态文件提供给客户端。确保服务器已经安装并正确配置。 7. 配置HTTP服务器以提供Vue项目的静态文件。 对于Nginx服务器,可以在Nginx的配置文件中添加以下配置: ``` server { listen 80; server_name your-domain.com; root /path/to/your/target-directory; index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 将"your-domain.com"替换为你的域名,将"/path/to/your/target-directory"替换为你的目标目录。 8. 保存配置文件并重新启动HTTP服务器。 对于Nginx服务器,可以通过运行以下命令重新加载配置: ``` sudo service nginx reload ``` 这样就完成了将Vue CLI 4项目部署到服务器其他目录下的过程。 以上是将Vue CLI 4项目部署到服务器其他目录下的简要步骤。你可以通过适当调整和配置来满足你的具体要求和服务器环境。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值