vue单独打包js文件

刚开始学vue框架，公司要求项目打包的时候把服务器的ip地址单独留一个接口，方便后期商家可以自行配置自己的服务器地址。

解决办法：

1、新建一个js文件用于保存服务器的ip地址，将当前ip存入window对象，内容如下：

2、在webpack配置文件中找到plugins选项，配置插件：

3、在index.html文件中以script标签形式引入server.js(保存ip)文件，注意在打包的时候开发环境和生产环境的路径问题：

4、在main.js中将ip添加到vue原型中：Vue.prototype.ip = window.ip

5、最后在需要调用 的地方直接使用this.ip即可。

6、打包之后的目录结构，如果服务器的ip地址发生了变化，可直接修改server.js文件，然后保存。

步骤如下：

1.安装express-generator

npm i express-generator -g

2.cmd打开要创建项目的文件夹，跑下面的代码，创建一个express项目

express express-project

注：express-project 是项目名称，可随意自取

3.进入项目目录

cd express-project

4.安装相关项目依赖

npm install

然后把刚刚打包后的dist文件夹下的所有文件复制到public文件夹下面（原文件可以删除）

5.运行项目

npm run start

6.在浏览器中查看

在地址栏输入localhost:3000即可

注：如需修改端口号，打开my-express-project\bin\www文件，

Vue项目编写完成后，一般需要打包压缩成新的文件，下面简单介绍一下是如何对Vue项目打包的。

工具/原料npm方法/步骤1npmrunbuild

2build进行中，一般这个过程需要一点点时间

3打包完成，可以看到有提示buildcomplete

4build完成时候可以在相中发现多了一个dist文件夹，里面包括一个css文件，js文件和index.html

5项目最终上线的内容是打包压缩的，也就是上面的dist文件，整个过程还是很简单的。

6需要注意一下，即使项目中仅仅修改了一丁点东西，都需要重新进行打包，执行上诉的 *** 作。

---