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

配置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的值改为 '../../'