vue cli版本在4.0以上的常見問題

• 1.創建項目
• 2.修改項目端口號
• 3.打包部署到nginx服務器
  • 3.1 首先在根目錄下創建vue.config.js
  • 3.2 使用命令打包
  • 3.3 如果爲安裝部署nginx，參考此處
  • 3.4 nginx的靜態資源的分離，參考此處
  • 3.5 將dist目錄下的文件放在你nginx指定的目錄下，在瀏覽器訪問即可
• 4. 引入jquery
  • 4.1 首先使用指令安裝jquery
  • 4.2 在main.ts進行引用
  • 4.3 在vue.config.js文件中添加以下配置
  • 4.4 具體如何使用
• 5.部署至tomcat 服務器
  • 5.1 在服務器上的Tomcat的 webapps文件夾下,新建一個文件夾如：vueservice
  • 5.2 將我們打包好的dist目錄中的文件放在剛剛新建的文件夾下，注意打包方式與部署至nginx服務器方式一致，注意打包後對index.html的修改，參考3.打包部署到nginx服務器
  • 5.3 啓動tomcat服務器，訪問路徑如下：http://localhost:8083/vueservice/
• 6.解決vue部署至服務器刷新非主頁面404問題
  • 6.1 路由配置是history模式，所以我們將history模式去掉

1.創建項目

參考此處

2.修改項目端口號

在 node_modules/@vue/cli-service/lib/commands/serve.js文件中修改，如下圖所示

3.打包部署到nginx服務器

3.1 首先在根目錄下創建vue.config.js

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ?
        './' :
        '/'
}

3.2 使用命令打包

npm run build

生成的文件在dist目錄下，此時生成的文件是不可以直接訪問的，需要部署在http服務器下，所以我們藉助nginx來進行部署。

3.3 如果爲安裝部署nginx，參考此處

3.4 nginx的靜態資源的分離，參考此處

3.5 將dist目錄下的文件放在你nginx指定的目錄下，在瀏覽器訪問即可

nginx的配置：

dist文件對應的目錄:

在瀏覽器訪問路徑：

4. 引入jquery

4.1 首先使用指令安裝jquery

npm install jquery --save

4.2 在main.ts進行引用

import 'jquery'

4.3 在vue.config.js文件中添加以下配置

// 引入jq需要加入以下代碼
const webpack = require('webpack')

  chainWebpack: config => {
        config.plugin('provide').use(webpack.ProvidePlugin, [{
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }])
    }

注意：若沒有vue.config.js，則需要自己新建一個該文件

下面貼出vue.config.js的代碼

// 引入jq需要加入以下代碼
const webpack = require('webpack')
module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ?
        './' : '/',
    devServer: {
        port: 3000, //前臺代理端口
        proxy: {
            '/vue': {
                target: 'http: //localhost:2000', //後臺接口
                ws: true, //如果要代理websockets
                secure: false, // 使用的是http協議則設置爲false，https協議則設置爲true
                changeOrigin: true, //將選項changeOrigin設置true爲基於名稱的虛擬託管站點。
                pathRewrite: {
                    '^/vue': '/vue'
                }
            }
        }
    },
    chainWebpack: config => {
        config.plugin('provide').use(webpack.ProvidePlugin, [{
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }])
    }


}

4.4 具體如何使用

在你要使用的頁面中添加

import $ from "jquery";

5.部署至tomcat 服務器

5.1 在服務器上的Tomcat的 webapps文件夾下,新建一個文件夾如：vueservice

5.2 將我們打包好的dist目錄中的文件放在剛剛新建的文件夾下，注意打包方式與部署至nginx服務器方式一致，注意打包後對index.html的修改，參考3.打包部署到nginx服務器

5.3 啓動tomcat服務器，訪問路徑如下：http://localhost:8083/vueservice/

注意：此處的http://localhost:8083/vueservice/中vueservice要與你自己創建的文件夾的名字一致

6.解決vue部署至服務器刷新非主頁面404問題

6.1 路由配置是history模式，所以我們將history模式去掉

打開 router/index.ts，刪除mode: “history”

本文章會持續更新，敬請期待。。。。