vue项目打包

一、终端运行命令 npm run build

二、打包成功的标志与项目的改变，如下图：





3、点击index.html，通过浏览器运行，出现以下报错，如图：



四、那么应该如何修改呢？

具体步骤如下：

1、查看package.js文件的scripts命令

2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到index.js文件

3、其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。

4、终端运行 npm run build 即可。

此时点击index.html，通过浏览器运行便，会发现动态绑定的static的图片找不到，故static必须使用绝对路径。将图片路径修改为绝对路径，至此，打包完成。

五、温馨提示

更多博文，请关注：xssy5431 【小拾岁月】

扫码：



 

目录

1 问题

2 解决

2.1 创建项目避开ESlint

2.2 使用了别人模板，禁止Disable Eslient

2.3 使用了别人模板，卸载

2.4 其他办法

2.4.1 关闭软件webstorm 的ESlint

2.4.2 注释掉项目内的ESlint


温馨提示：ctrl+alt+L可以规范代码格式，比Eslient更是随性一定，适合非强迫症，让那个比教导主任还严的ESlint滚粗


1 问题

每次都红我缩进，

每次都要改，太麻烦了



 

2 解决

2.1 创建项目避开ESlint

最好的办法就是创建项目的时候不要ESlint



好了！特别清爽的感觉！



 

2.2 使用了别人模板，禁止Disable Eslient



                   

 



2.3 使用了别人模板，卸载

说实话，以前我觉得Eslient很烦，

后来要维护别人的代码的时候，才发现Eslient很棒

最后的最后发现，理解Eslient的人，没有它也写得工工整整，不理解的朋友，全部代码都红都不会看一眼，伤害的只有自己

npm uninstall eslint --save

2.4 其他办法

2.4.1 关闭软件webstorm 的ESlint

file->settings->搜索ESlint->取消Enable的勾选

 



2.4.2 注释掉项目内的ESlint

项目目录下build.js->webpack.base.conf.js文件里面有段代码  注释掉！！！



 

打开一个VUE项目，目录结构是这样的：



如现在有两个页面aaa和HelloWorld，路由配置在index.js中：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import aaa from '@/components/aaa'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
    	path: '/aaa',
      name: 'aaa',
      component: aaa
    }
  ]
})

现在在HelloWorld中点击按钮跳转到aaa，在aaa中点击按钮也可以返回到HelloWorld:

1、HelloWorld:

<div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="go">点我跳转</button>
</div>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '哈哈'
    }
  },
  methods:{
  	go(){
  		this.$router.push('/aaa')
  	}
  }
}
</script>

2、aaa:

<template>
	<div>我是aaa
	<button @click="back">点我返回</button>
	</div>
	
</template>

<script>
export default {
  name: 'aaa',
  /*data () {
    return {
      msg: '哈哈'
    }
  },*/
  methods:{
  	back(){
  		this.$router.push('/')
  	}
  }
}
</script>

 

 

 

IntelliJ IDEA安装vue插件

如果要做vue项目开发，需要安装对应的插件。

如果不想安装插件，可以安装另外一个开发工具WebStorm，需要注册码破解。

打开File -> Settings -> Plugins，输入vue，搜索。需要安装NodeJS和Vue.js。安装完成，重启IDEA即可。


为了解决项目报错，需要设置编译环境为ES6。



IntelliJ IDEA导入vue项目

打开File -> Open，选择vue项目的文件夹，等待一会，等项目初始化完成，启动项目即可。
IntelliJ IDEA启动vue项目

运行命令npm run dev会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新，浏览器就能实时看到修改后的效果。

启动vue项目，有两种方式。

方式一：cmd命令启动vue项目。

–打开cmd窗口

G:
cd vueworkspace/pVue
–启动项目

npm run dev，npm run test，npm run build


方式二：IDEA启动vue项目。

添加启动脚本。



创建npm脚本。



创建开发脚本。开发脚本，只是为了快速启动项目，方便开发、调试。

不需要创建测试环境脚本、正式环境脚本。这两种脚本是用来打包的。



IntelliJ IDEA打包vue项目

需要部署项目到测试环境、正式环境，那么就要把vue项目打包。

打包有两种方式，命令行打包、IDEA打包。与启动vue项目的方法，基本一样。
创建测试环境的打包脚本。



创建正式环境的打包脚本。



选择打包脚本，点击右边的绿色三角形，等待一会，就打包成功了。

打包出来的文件，存放在“xx项目/dist”目录，把文件压缩成zip文件，上传到服务器，再解压出来，就完成部署了。