首页 > 编程知识 正文

vuecli3打包部署生产环境,vue项目打包配置

时间:2023-05-04 18:17:14 阅读:223796 作者:4515

配置vue开发环境和生产环境打包方式

1. 打开package.json文件,添加 "test": "node build/test.js"
2. 打开build文件,复制build.js文件并重命名为test.js
注:这里的build.js为生产环境打包使用,test.js为测试环境打包使用。

3.在config文件下,复制prod.env.js并重命名为test.env.js,用来配置测试环境。如图:

下面对test.env.js进行配置,设置NODE_ENV为’“testing”’,API_ROOT为测试环境域名

设置prod.env.js中的API_ROOT为生产环境域名,NODE_ENV为默认’“production”’


4.打开build文件下的test.js,设置process.env.NODE_ENV = 'testing'

与config中的test.env.js中的NODE_ENV配置相对应,表示使用测试环境配置进行打包。

5.设置build文件下的webpack.prod.conf.js文件中的env为以下三元表达式,如图:

用来区分是测试环境打包,还是生产环境打包。到这里为止已经可以进行分别打包了,运行npm run test(打包测试环境)、运行npm run build(打包生产环境)

注:但是打包以后,会发现测试环境下生成的dist文件,运行后js、css文件路径找不到,画面不显示问题。好,我们继续往下走:

6.打开config文件下的index.js文件

此时我默认认为你已经进行过对build打包js、css文件路径问题进行过配置修改 ( 如果还没有对文件路径进行过任何配置,请先移步至文章最底部,完成配置后,再回到此步骤 );此步骤只针对已经配置过正确的js、css文件路径,但是测试环境打包后,js、css依然路径不正确问题。


复制整个build,并重命名为test

8.打开build文件下的webpack.base.conf.js

将publicPath改为如图三元表达式;表示,根据环境不同,去取config文件下index.js中对应的assetsPublicPath配置路径。至此,所有的配置工作已结束,打包以后文件路径正确,画面显示正常。

完美…

build打包后,js、css文件控制台报错,路径找不到

1.打开config下的index.js,将assetsPublicPath的值改为 './'


2.打开build文件下的utils.js,将publicPath的值改为 '../../'

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。